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

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