CSS规范说什么是测量元素宽度的正确方法？

Chrome似乎从边距的内侧测量元素的宽度，包括填充，但Firefox和IE测量边框所在的框的宽度（不包括填充，但包括内边距）。从边框测量元素的宽度对我来说很有意义，在编码时也很有帮助，因为打开边框可以让你很容易地看到元素的宽度，但我的问题是CSS规范说什么是测量元素宽度的正确方法，以及chrome是错的还是IE和Firefox是错的

感谢您的帮助

请随时联系。当然，过去十年中，每个浏览器的实现方式都有所不同

---

元素的

width

属性应该是“内容区域宽度”，不应该包括边距、填充或边框。在某些版本和情况下。一般来说，其他浏览器遵循该规范。

W3CCSS 2.1 Box模型规范指出，元素的宽度不包括边距、边框或填充

事实上，通过指定CSS宽度或高度属性，您可以指定框（在规范中称为内容区域）内容的可用空间，其中不包括填充、边距或边框

看看这个例子：

div { width: 100px; padding: 10px; margin: 20px; border: 2px; }

垂直边框（包括它们）之间的距离为宽度+左填充+右填充+右边框宽度+左边框宽度。 边距在边框框的外面。 宽度（如CSS规范所示）改为100px

Internet Explorer以标准模式或怪癖模式呈现网页。 如果您希望IE按其应有的方式运行（因此遵循CSS标准），则必须使用本文中报告的一种doctype强制它使用标准模式：

这种技术称为doctype开关

Firefox和大多数其他浏览器都遵循标准的box模式

您可以在此处阅读W3C box型号规范： 但我建议你读一篇更容易阅读（但确实很好）的文章，如下所示：

另一个需要说明的是，css3规范将包括一个属性，该属性允许为每个元素指定解释

width

属性的方式（如果排除或包括填充和边框）。

---

无论如何，大多数浏览器都需要数年时间才能实现新的（尚未完成的）CSS 3规范。

所有现代浏览器都能正确呈现长方体模型。这里的回答冗长但正确。基本上是具有以下详细信息的块元素：

border: 10px;
margin: 10px;
padding: 10px;
width: 100px;

将具有以下特点：

该元素使用的总空间为160px宽。这是宽度+填充*2+边距*2+边框*2，因为我们在框的两侧指定了对称边框、填充和边距

元素中内容的可用空间只有100px宽

到元素边界的可用空间为120px

---

Chrome、Safari、FireFox、Opera和IE6/7/8都应该显示这种行为。

您描述这种行为的方式令人困惑。例如，您知道填充和边距的确切位置吗？另外，你知道IE中的盒子模型错误吗？您是否使用了正确的doctype？你确定FF的行为和IE完全一样吗？我有一个div，它的位置绝对正确，所以它的底部会隐藏在屏幕的顶部。。。padding属性导致div垂下的距离超过高度，但仅限于chrome。。。IE看起来像是在测量边界的高度，不包括填充物。。。我想知道谁测量正确