武林網(www.survivalescaperooms.com)文章簡介：遲來的 CSS3 新屬性：box-sizing.

說到 IE 的 bug，一個臭名昭著的例子是它對于“盒模型”的錯誤解釋：在 IE5.x 以及 Quirks 模式的 IE6/7 中，將 border 與 padding 都包含在 width 之內。這為前端工程師的工作平添了不少麻煩，幾戶每個需要定義尺寸的 box 都要思量一下：是否觸發了“盒模型 bug”？

同時，由于另一撮瀏覽器對標準的遵從，我們在精確定義一個在有限空間內顯示的 box 時，也需要計算一下：留給它的空間只有那么大，刨去 border 和 padding，我們該把它的 width 寫成多少呢？

這種情況在 CSS3 時代有了改善，得益于這個叫做 box-sizing 的屬性，它具有“content-box”和“border-box”兩個值。

為什么說這個屬性“遲來”呢？IE 對于盒模型的解釋固然不符合 W3C 的規范，但是也有它的好處：無論如何改動 border 與 padding 的值，都不會導致 box 總尺寸發生變化，也就不會打亂頁面整體布局。而在 Firefox 等現代瀏覽器下，如果我們要改變一下 padding 的值，就不得不重新計算 box 的 width。現在 IE6 壽終正寢，這個 CSS 屬性未免有些姍姍來遲。

試用這個新屬性，Firefox 請使用 -moz-box-sizing，Safari / WebKit 請使用 -webkit-box-sizing，Opera 直接用 box-sizing 即可。