Question

我创建了一个text类型的输入元素，并给它一个90px的宽度，当我做这个代码来找到它确实返回90px的宽度时，datafield是我存储对元素的引用的变量

  var firstWidth = theDatafields.eq(0).css("width");       
    console.log("the first " + firstWidth);

但是当我实际通过开发控制台检查元素并在检查元素时将鼠标悬停在元素上它会给我94px。额外的4px来自哪些想法？

Answer 1

border，每边2px，使90px完全width 86px。

要亲自查看开发人员工具layout中的f12，例如firebug（firefox），或{{1}中的默认值}}

Answer 2

元素占据的总宽度（不计算其边距）是其内容的宽度加上左边框，右边距，左边框和右边框的宽度。 CSS width属性默认情况下由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-style和border-color。

P.S。如果您尝试使用box-sizing: border-box修改尺寸标注（根据HTML5草稿应该是浏览器默认设置，但不是），则会引入另一个浏览器依赖项：Chrome和IE会尊重它，而Firefox则不然。

Answer 3

每边2px的边框？请参阅：box-sizing

输入元素大于指定的

3 个答案: