CSS3 box-sizing属性

谈到IE浏览器的bug，其中最为人所熟知的例子就是它对“盒模型”的误解。在IE5.x以及处于怪异模式（Quirks Mode）下的IE6和IE7中，边框（border）和内填充（padding）都被包含在宽度（width）之内。这无疑给前端工程师的工作带来了不小的困扰。每当他们需要定义一个盒子（box）的尺寸时，都必须谨慎思考：是否触碰了这个“盒模型bug”？

其他浏览器对标准的遵循也给我们带来了挑战。在精确定义一个在有限空间内显示的盒子时，我们需要仔细计算：在减去边框和内填充后，该盒子的宽度应该是多少？这种情况在CSS3时代得到了改善，出现了一个名为box-sizing的属性，它拥有“content-box”和“border-box”两个值。

当我们设定box-sizing为content-box时，浏览器对盒模型的解释遵循我们熟知的W3C标准。而当我们设定box-sizing为border-box时，浏览器对盒模型的解释则与IE6相同。

为什么说这个属性“姗姗来迟”呢？尽管IE对于盒模型的解释与W3C规范不符，但这种解释也有其优点：无论如何调整边框和内填充的值，盒子的总尺寸都不会改变，从而保证了页面布局的稳定性。而在现代浏览器如Firefox下，如果我们想要调整内填充的值，就必须重新计算盒子的宽度。如今，随着IE6逐渐退出舞台，这个CSS属性的出现似乎有些晚了。

对于那些愿意尝试这个新属性的开发者来说，Firefox需要使用-moz-box-sizing，Safari/WebKit则需要使用-webkit-box-sizing，而Opera则直接使用box-sizing即可。这一属性的出现，无疑为前端工程师提供了更多的选择和灵活性，使得页面布局更加易于控制和调整。