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

同時(shí)，由于另一撮瀏覽器對(duì)標(biāo)準(zhǔn)的遵從，我們?cè)诰_定義一個(gè)在有限空間內(nèi)顯示的 box 時(shí)，也需要計(jì)算一下：留給它的空間只有那么大，刨去 border 和 padding，我們?cè)摪阉?width 寫成多少呢？

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

• 定義 box-sizing: content-box; 時(shí)，瀏覽器對(duì)盒模型的解釋遵從我們之前認(rèn)識(shí)到的 W3C 標(biāo)準(zhǔn)；
• 定義 box-sizing: border-box; 時(shí)，瀏覽器對(duì)盒模型的解釋與 IE6 相同；

為什么說(shuō)這個(gè)屬性“遲來(lái)”呢？IE 對(duì)于盒模型的解釋固然不符合 W3C 的規(guī)范，但是也有它的好處：無(wú)論如何改動(dòng) border 與 padding 的值，都不會(huì)導(dǎo)致 box 總尺寸發(fā)生變化，也就不會(huì)打亂頁(yè)面整體布局。而在 Firefox 等現(xiàn)代瀏覽器下，如果我們要改變一下 padding 的值，就不得不重新計(jì)算 box 的 width?，F(xiàn)在 IE6 壽終正寢，這個(gè) CSS 屬性未免有些姍姍來(lái)遲。

試用這個(gè)新屬性，F(xiàn)irefox 請(qǐng)使用 -moz-box-sizing，Safari / WebKit 請(qǐng)使用 -webkit-box-sizing，Opera 直接用 box-sizing 即可。

最新評(píng)論