我创建了一个文本类型的输入元素并给它一个 90px 的宽度，当我执行这段代码来找到它确实返回 90px 的宽度时，数据字段是我存储对元素的引用的变量
var firstWidth = theDatafields.eq(0).css("width");
console.log("the first " + firstWidth);
但是当我通过开发控制台实际检查元素并在检查元素时将鼠标悬停在元素上时，它给了我 94px。额外的 4px 来自哪里的任何想法？
问问题
234 次
3 回答
1
它的border，它在每一侧，2px使它完全90px给它一个width。86px
要自己查看此layout内容，请检查开发人员工具 ( f12)，例如firebug(for firefox)，或chrome.
于 2013-09-11T22:17:38.043 回答
1
一个元素占据的总宽度，不包括它的边距，是它的内容的宽度加上左填充、右填充、左边框和右边框的宽度。默认情况下， CSSwidth属性由 CSS 规范和浏览器的“标准”模式设置，仅设置内容宽度。
input元素的默认样式会有所不同。你可能在 Chrome 中测试过，它没有默认的水平内边距和 2px 边框，所以总宽度为 2px + 90px + 2px = 94px。在 Firefox 上测试，你会得到 1px + 2px + 90px + 2px + 1px = 96px，因为它默认使用 1px 边框和 2px 填充。在 IE 上，你得到 94px，但与 Chrome 不同：IE 有 1px 边框和 1px 水平内边距（奇怪的是，还有 2px 垂直内边距）。
你从像 jQuery 这样的库中得到什么取决于它是如何编写的，并且可能取决于它的版本和你使用它的方式。在纯 JavaScript 中，可以在属性中找到元素的总宽度（内容加内边距加边框，但不包括边距），以像素为单位offsetWidth。（该clientWidth属性具有无边框的宽度。）
士气是，如果您想要像素完美，则需要明确设置填充和边框宽度。但请注意浏览器的行为异常。他们有自己特殊的渲染input元素的方式，如果你干扰了他们的边框设置，你可能会以你无意的方式影响边框。只是设置，比如说，border-width: 1px也可能影响边框样式。因此，要跨浏览器获得相同的渲染，可能使控件看起来与它们在每个浏览器中的正常外观不同，您还需要设置border-styleand border-color。
PS 如果您尝试修复尺寸标注box-sizing: border-box（根据 HTML5 草案，这应该是浏览器的默认设置，但不是），您会引入另一个浏览器依赖项：Chrome 和 IE 支持它，而 Firefox 不支持。
于 2013-09-11T23:00:24.777 回答
0
每边2px的边框？看：box-sizing
于 2013-09-11T22:17:43.723 回答