說到 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 即可。
box-sizing:border-box;
-moz-box-sizing:border-box; /* firefox */
-webkit-box-sizing:border-box; /* safari */
width:50%;
關於css3 box sizing屬性
在css3中，box sizing提供了兩種選擇，乙個是content box，乙個是border box。content box的模式裡，元素設定的寬和高為內容寬高 而border box中，元素設定的寬高為整體元素呈現出來的寬高。使用第二種模式就省去了計算，能夠十分簡單地，不需計算內外邊距而設定...
css3 box sizing屬性值詳解
box sizing屬性可以為三個值之一 content box default border box，padding box。content box，border和padding不計算入width之內 padding box，padding計算入width內 border box，border和p...
CSS3 box sizing 屬性的簡單認識
定義和用法 box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。預設值 content box 繼承性 無 css版本 css3 語法 box sizing content box border box inherit 屬性值說明 content box 預設值 由css2.1規...