CSS 3教學:box-sizing屬性的理解
作者：Eve Cole
更新時間：2009-06-12 17:54:27
說到IE 的bug，一個臭名昭著的例子是它對於「盒子模型」的錯誤解釋：在IE5.x 以及Quirks 模式的IE6/7 中，將border 與padding 都包含在width 之內。這為前端工程師的工作平添了不少麻煩，幾戶每個需要定義尺寸的box 都要思量一下：是否觸發了「盒子模型bug」？
同時，由於另一撮瀏覽器對標準的遵從，我們在精確定義一個在有限空間內顯示的box 時，也需要計算一下：留給它的空間只有那麼大，刨去border 和padding，我們該把它的width 寫成多少呢？
這種情況在CSS3 時代有了改善，得益於這個叫做box-sizing 的屬性，它具有「content-box」和「border-box」兩個值。
定義box-sizing: content-box; 時，瀏覽器對盒模型的解釋遵從我們先前認識到的W3C 標準；
定義box-sizing: border-box; 時，瀏覽器對盒子模型的解釋與IE6 相同；
為什麼說這個屬性「遲來」呢？ IE 對於盒子模型的解釋固然不符合W3C 的規範，但也有它的好處：無論如何改動border 與padding 的值，都不會導致box 總尺寸發生變化，也就不會打亂頁面整體佈局。而在Firefox 等現代瀏覽器下，如果我們要改變一下padding 的值，就必須重新計算box 的width。現在IE6 壽終正寢，這個CSS 屬性未免有些姍姍來遲。
試試這個新屬性，Firefox 請使用-moz-box-sizing，Safari / WebKit 請使用-webkit-box-sizing，Opera 直接用box-sizing 即可。
