Html 输入元素大于指定值

我创建了一个text类型的输入元素，并给它一个90px的宽度，当我执行这段代码来查找宽度时，它会返回90px，datafield是我存储元素引用的变量

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

---

但是当我通过dev控制台实际检查元素并在检查元素时将鼠标悬停在元素上时，它会给我94px。你知道额外的4px是从哪里来的吗

它是

边框

，每边是

2px

，使其精确

90px

给它一个

宽度

为

86px

---

要亲自查看这一点，请检查开发人员工具（

f12

）中的

布局，例如
firebug
（对于
firefox
），或者
chrome
2倍边框中的默认布局？请参阅：
框大小调整
元素占用的总宽度（不包括其边距）是其内容的宽度加上左填充、右填充、左边框和右边框的宽度。默认情况下，CSS
width
属性根据CSS规范和浏览器中的“标准”模式，仅设置内容宽度

输入
元素的默认样式各不相同。您可能已经在Chrome中进行了测试，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
属性具有无边框宽度。）

士气在于，如果您想要像素完美，您需要明确设置填充和边框宽度。但要注意浏览器的行为异常。它们有自己特殊的渲染
输入
元素的方法，如果您干扰了它们的边框设置，可能会以您无意的方式影响边框。只需设置，例如，
边框宽度：1px
也可能会影响边框样式。因此，要在浏览器之间获得相同的渲染效果，可能会使控件在每个浏览器中的外观与正常外观不同，您还需要设置
边框样式
和
边框颜色

另外，如果您尝试使用
框大小：边框框
（根据HTML5草稿，它应该是浏览器默认值，但不是），则会引入另一个浏览器依赖项：Chrome和IE，Firefox没有。
我想说的是，输入有一个2倍宽的固有边框元素，只有内部文本输入区域的宽度为90倍。请包括一个提琴。好的。因此，所有元素都必须具有固有的边框，并且在修改大小以适合容器时必须加以考虑。使用控制台检查元素将应用边框/填充。使用
.css（“宽度”）
获得无边框/填充的宽度。如果您接受我的答案，您也可以给它一个
+1
。