快速提示：Internet Explorer是否使Box Model正确？

最新推荐文章于 2025-12-26 20:14:45 发布

翻译最新推荐文章于 2025-12-26 20:14:45 发布 · 157 阅读

文章标签：

探讨了Internet Explorer对CSS盒模型的独特解析方式，及其对布局设计的影响。文章对比了标准CSS盒模型与IE模型的区别，解释了如何使用box-sizing属性来兼容不同浏览器的盒模型解析。

CSS标准规定，边框和填充应应用在元素的指定宽度之上。这样，如果我有一个200px的div，并应用了40px的边框和填充，则总宽度为240px。这是很合理的。但是，Internet Explorer实际上做的事情有所不同。他们采用了最大宽度是您指定的模型。然后将边框和内边距计入该宽度，以减少内容区域。因此，元素的宽度永远不会超过规定的200px宽度。

由于我们大多使用极其敏感的浮动布局，因此即使添加1px边框也会破坏设计，我想知道：Internet Explorer是否正确？

装箱尺寸

“ box-size CSS属性用于更改用于计算元素的宽度和高度的默认CSS box模型。可以使用此属性来模拟不正确支持CSS盒模型规范的浏览器的行为。”

全屏播

这意味着，如果您决定要模仿Internet Explorer对Box模型的原始解释，则可以。框大小的默认值为“ content-box”。这仅表示元素的宽度和高度不包括边框和填充（或边距）。

通过将此值更改为“边框”，宽度和高度值将包括边框和内边距。

#box { 
 width: 200px; 
 height: 200px; 
 background: red; 
 
 padding: 10px; 
 border: 10px solid black; 
 
 -moz-box-sizing: border-box; 
 -webkit-box-sizing: border-box; 
 box-sizing: border-box; 
}

因为我们声明了box-sizing的值为“ border-box”，所以上面样式设置的#box元素的最终宽度将为200px。

特别是对于浮动版式，这可以省去很多麻烦！但是话虽如此，我仍然不确定。您对Internet Explorer对Box模型的解释有何看法？

翻译自: https://code.tutsplus.com/tutorials/quick-tip-did-internet-explorer-get-the-box-model-right--net-12328