Javascript Chrome开发工具如何计算元素的计算公制宽度？

我需要知道Chrome如何在devtools的computed窗格中获取元素的“computed metric”宽度：

为什么它与元素的内容宽度不同？您可以通过滚动到Computed窗格的底部并在那里找到“width:”（注意，它显示为“267.484375px”，而不是报告的“237.458”）：

要验证这些声明，可以使用jQuery.width（）方法，该方法计算不带填充的内容宽度，而不考虑框大小属性：

$(".element_class.to_verify").width();
236.98399925231934

显然，jQuery报告的内容宽度与Chrome报告的“计算宽度属性”有很大不同。如此不同，足以毁掉好的设计那么Chrome是如何计算这些“宽度”的，为什么它们不一致

---

我的安装是否可能有问题，或者我遗漏了什么？

这是因为您使用的是

框大小：边框框

，因此宽度包括填充。另一方面，Devtools只显示不同的度量值。我根本没有看到它显示小数——而且我永远不会以像素为单位依赖小数。

width

显然包含了2 x 15px的填充。@u353 CSS属性width。由于框大小：边框框，它会发生更改（包括填充）。devtools和by JS中显示的度量是没有填充的内容区域的真实值。这都是HTML框模型的一部分。@Hoshts感谢您的最小努力，但您没有告诉我我在原始帖子中没有说明的任何内容。再看看这些数字，CSS属性宽度与jQuery宽度（）至少相差1个像素；正如你所看到的，这个元素没有边界。我不是问箱子的尺寸，我已经知道了，并在问题中说明了这一点。