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」兩個值。

    定義 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 便可。