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

Question

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

谢谢你的帮助

Answer 1

W3C CSS 2.1 盒模型规范规定元素的宽度不包括边距、边框或填充。

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

看这个例子:

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

垂直边框(包括它们)之间的距离是 width + padding-left + padding-right + border-right-width + border-left-width。 边距在边界框之外。 宽度(按照 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 规范。