想要?jiǎng)?chuàng)建出漂亮的網(wǎng)頁設(shè)計(jì)，除了要認(rèn)真學(xué)習(xí)每一個(gè)html和CSS代碼之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE瀏覽器的壞脾氣，因?yàn)槟惚緛韺懗龅囊?guī)規(guī)矩矩的代碼，漂亮的設(shè)計(jì)就此就要完成了，卻發(fā)現(xiàn)呈現(xiàn)出的效果壓根不是你所期望的那樣，漂亮的布局被破壞的體無完膚。更可氣的是當(dāng)你查找一遍代碼中的錯(cuò)誤時(shí)，卻壓根找不出來。這時(shí)候你就迫切需要了解一下IE6和它的那些同伙的壞脾氣了，因?yàn)楹芸赡芩鼈兙褪亲锟準(zhǔn)住５降譏E6的那幾個(gè)家伙們到底是如何搞亂你的設(shè)計(jì)的？別急，讓我來一一介紹。

一、什么是盒模型（Box Model）？

在CSS中，CSS將網(wǎng)頁中的每一個(gè)段落、標(biāo)題、圖片等元素都看成是一個(gè)裝在盒子里的東西，也就是盒子里的內(nèi)容。比較讓人好理解一些的一個(gè)比喻是一個(gè)大紙盒子里裝了一塊方形的面包。面包就是一個(gè)段落、一個(gè)標(biāo)題或者一幅圖片，面包比盒子要小一些。面包的邊緣到盒子側(cè)邊的距離就是CSS中的內(nèi)邊距屬性（Padding），盒子的側(cè)面四個(gè)邊形成的邊框就是CSS中的Border屬性，而一個(gè)網(wǎng)頁中有很多段落、標(biāo)題、圖片，也就是有很多這樣的盒子，這些盒子和盒子之間的距離就是CSS中的外邊距屬性（margin）。看看下圖也許你能一下就明白：

二、什么是IE中的盒模型Bug？

那么這些裝著面包的盒子在IE中會(huì)出什么問題呢？首先，在IE6，包括IE6以上的IE版本中，對于盒模型的解析沒有什么問題，而在低于IE6的IE版本中，IE在解析盒模型時(shí)會(huì)有一些問題出現(xiàn)。讓我來舉例說明。

首先，我們來定義一個(gè)盒子：

標(biāo)準(zhǔn)情況下，這個(gè)盒的寬度應(yīng)該是：10+10+30+30+200=280px。但是在IE5.0瀏覽器中，對盒模型的寬度解釋有個(gè)bug，它會(huì)認(rèn)為200px是整個(gè)盒的總寬度，那么如果這樣解釋的話，內(nèi)容的寬度變成：200-10-10-30-30=120px。下面是兩者的對比圖：

三、如何解決盒模型Bug這個(gè)問題呢？

其實(shí)對這個(gè)問題完全可以置之不理，因?yàn)槟壳叭蚴褂肐E6以下版本的人數(shù)應(yīng)該是屈指可數(shù)了，我們也在經(jīng)過盜版XP的洗禮下，整體上都更新到了IE6.0。當(dāng)然，如果你要網(wǎng)頁保持完美的話，要彌補(bǔ)這個(gè)bug，可以采用這樣一個(gè)技巧：即增加一個(gè)IE5不能解釋的聲音屬性“voice-family”，讀到這個(gè)定義時(shí)瀏覽器就不再繼續(xù)閱讀，認(rèn)為寬度就是280px，而其他符合標(biāo)準(zhǔn)的瀏覽器會(huì)繼續(xù)閱讀，并執(zhí)行第二個(gè)真實(shí)值200px。CSS代碼如下：

關(guān)于voice-family屬性的功能，主要是把文檔轉(zhuǎn)化為純文本，然后傳給屏幕閱讀器（可讀出屏幕上所有字符的一種程序）。是用來幫助視覺能力低弱的人士，或者在家庭娛樂和汽車中使用的，平時(shí)我們幾乎用不到這個(gè)CSS屬性。（原文地址）