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

Question

Chrome似乎从边距内部测量元素宽度,包括填充,但Firefox和IE测量边框所在的框宽度(不包括填充但内部边距).从边框测量元素宽度对我来说很有意义,并且在编码时也很有用,因为打开边框会让你很容易看到元素的宽度但我的问题是CSS规范说的是测量宽度的正确方法一个元素,如果铬错误或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规范.