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

【问题标题】：What does the CSS specification say is correct way to measure an elements width?CSS规范说什么是测量元素宽度的正确方法？
【发布时间】：2011-01-06 22:06:10
【问题描述】：

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

感谢您的帮助

【问题讨论】：

您描述行为的方式令人困惑。例如，您知道填充和边距的确切位置吗？另外，您知道 IE 中的盒子模型错误吗？您是否使用了正确的文档类型？你确定 FF 的行为与 IE 完全一样吗？
我有一个绝对定位的 div，因此它的底部将隐藏在屏幕顶部... padding 属性导致 div 比高度下垂更远，但仅在 chrome 中。 .. IE 似乎将边框测量为高度而不包括填充...我想知道谁在正确测量

标签： css internet-explorer firefox google-chrome specifications

【解决方案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 规范的规定）改为 100 像素。

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 规范。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

将具有以下特点：

元素使用的总空间为 160 像素宽。这是 width+padding*2+margin*2+border*2，因为我们已经在盒子的两侧指定了对称的边框、内边距和外边距。
元素内内容可用的空间只有 100px 宽。
到元素边框的可用空间为 120px。

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

【讨论】：