Question

Chrome似乎从边距内部测量元素宽度，包括填充，但Firefox和IE测量边框所在的框宽度（不包括填充但在边距内）。从边框测量元素宽度对我来说很有意义，并且在编码时也很有用，因为打开边框会让你很容易看到元素的宽度但我的问题是CSS规范说的是测量宽度的正确方法一个元素，如果chrome错误或IE和Firefox

感谢您的帮助

Answer 1

W3C CSS 2.1 Box模型规范说明元素的宽度不包括边距，边框或填充。

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

看看这个例子：

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

垂直边框（包括它们）之间的距离是宽度+填充左侧+填充右侧+边框右侧宽度+边框左侧宽度。边距位于边框之外。宽度（根据CSS规范的意图）是100px。

Internet Explorer以标准模式或 Quirks模式呈现网页。如果您希望IE的行为符合要求（因此遵循CSS标准），您必须使用本文中报告的其中一个DOCTYPE强制它使用标准模式：http://www.alistapart.com/articles/doctype/

此技术称为 doctype-switch 。

Firefox和大多数其他浏览器都遵循标准的盒子模型。

您可以在此处阅读W3C盒型号规格：http://www.w3.org/TR/CSS21/box.html#box-dimensions 但我建议你阅读一篇更容易阅读（但非常好）的文章：http://reference.sitepoint.com/css/boxmodel

另一个要说的是CSS 3规范将包含box-sizing属性，该属性允许为每个元素指定解释width属性的方式（因此，如果排除或包括填充和边界）。无论如何，大多数浏览器需要数年才能实现新的（尚未完成的）CSS 3规范。

Answer 2

随意read it。当然，过去十年中的每个浏览器都以不同的方式实现了它。

元素的width属性应该是“内容区域宽度”，并且不应包含边距，填充或边框。 IE did not implement it this way在某些版本和情况下。通常其他浏览器遵循规范。

Answer 3

所有现代浏览器都能正确渲染盒子模型。这里的回答很长，但是正确的。本质上是一个具有以下细节的块元素：

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

具有以下特征：

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

Chrome，Safari，FireFox，Opera和IE6 / 7/8都应显示此行为。

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

3 个答案: