FF和OPERA即其它遵循CSS2標(biāo)準(zhǔn)的瀏覽器由于版本的不斷改進(jìn)，早就支持:
　　display:table
　　dispaly:table-cell
　　dispaly:table-row
　　dispaly:table-row- group
　　dispaly:table-column
　　dispaly:table-column-group　等屬性。
　　(至少是 FF1.0,OPERA7就能支持了，之前的就不太清楚了)那還猶豫什么?開始動(dòng)手吧(為了演示加了一些 padding和border):

IE不支持該效果，F(xiàn)F和OPERA下看看。


上面的示例分別定義：


那么它們在CSS2的樣式里表現(xiàn)就分別相當(dāng)于表格的<tabel>、<tr>、<td>標(biāo)簽，這樣上面第一個(gè)示例里的5個(gè) <li>就自然的被均分橫向排列在#b和#b ul里，一切都很正常，表格都是這么解釋的。然而，細(xì)心的朋友又會(huì)想到另一個(gè)問題，當(dāng)#d的寬度不能被所包含的#d li的節(jié)點(diǎn)數(shù)整除，#d li的寬度又是如何均分#d的寬度呢？它在瀏覽器下寬度尺寸又是如何表現(xiàn)的呢？為了說明問題，重新定義一個(gè)不被#d li的節(jié)點(diǎn)數(shù)整除的#d的寬度，這里任意給個(gè)799px，在FF/opera下測試看看：

這個(gè)在IE下就不用測試了，我也沒加非IE的判定。


既然FF和OPERA都基于上述原理來解釋這種類似表格的樣式，IE又不支持，何不為其設(shè)定一個(gè)相同的解釋機(jī)制呢？我們先來看看IE下我們所能做作的：


這里定義了#d li向左浮動(dòng)，也分別定義了它們的寬度（注：這里因?yàn)樵O(shè)定了其border為1px，寬度就是158px了）。為了防止FF/OPERA識(shí)別浮動(dòng)，用了_float:left; 這回可以在IE下測試了——相當(dāng)完美！當(dāng)然FF/OPERA下當(dāng)然也一樣到此，假如你認(rèn)為問題解決了，并且你平時(shí)也是這么做的——那么你現(xiàn)在可以關(guān)閉這個(gè)話題了，該忙什么就忙什么吧！

然而，問題是當(dāng)我們的設(shè)定#d的寬度為798px呢？——那再給倒數(shù)第二個(gè)#d li加個(gè)樣式來設(shè)定寬度width:157px不就得了？那假如再重新設(shè)定#d的寬度為797px、796px……呢？（也許你設(shè)計(jì)完成一個(gè)頁面后再也不會(huì)動(dòng)這些寬度尺寸了）但再麻煩點(diǎn)的是假如#d li的節(jié)點(diǎn)數(shù)需要調(diào)整了——表現(xiàn)為我們在日常的網(wǎng)站開發(fā)和維護(hù)中往往會(huì)增加或減少這種導(dǎo)航列表欄目，是否還要重新計(jì)算和分別設(shè)定這些#d li的寬度呢？

這不算很麻煩，我的數(shù)學(xué)還不至于那么差勁——也許你會(huì)說。
但真正麻煩的是：當(dāng)我們在做一個(gè)按百分比來進(jìn)行頁面及橫向?qū)Ш降脑O(shè)計(jì)時(shí)，這些#d li的寬度又該如何設(shè)定呢？還是實(shí)例為王，下面只是對(duì)上面的示例做個(gè)小小的改動(dòng)，還好是5個(gè)#d li節(jié)點(diǎn)，正好每個(gè)寬度是20％：


測試似乎也很不錯(cuò)，似乎沒什么不如意的地方（可能在有些機(jī)器上會(huì)折行）。再調(diào)整一下分辨率看看 ——還是挺好的啊（可能在有些機(jī)器上會(huì)折行）！那么你在試試縮小IE窗口（不是最小化到任務(wù)欄），假如還是正常的話（相信有些朋友的導(dǎo)航效果已經(jīng)開始出現(xiàn)折行了）——我會(huì)有辦法讓你沮喪的把你的鼠標(biāo)放在縮小后的IE窗口的右邊框上，橫向逐漸逐漸拖動(dòng)縮放IE的窗口——不用多說，很多朋友肯定早已明白這當(dāng)中的原由，這里啰嗦一下主要是針對(duì)一些不太明白的新人，老人就忽略這段吧簡單說一下：
上例中設(shè)定的#d的百分比寬度為80%，那么這個(gè)寬度自然會(huì)隨著IE窗口大小的改變而改變，假如調(diào)整后的IE窗口為999，那么這時(shí)這個(gè)#d的實(shí)際寬度為 792，這個(gè)寬度自然不能被#d li的節(jié)點(diǎn)數(shù)整除，也就是20%寬度不為整數(shù)（瀏覽器顯示的最小單位是1象素，不能再分了，可能是四舍五入），很自然就會(huì)出現(xiàn)#d li的寬度和大于#d的實(shí)際寬度而導(dǎo)致折行現(xiàn)象了。

天哪！差點(diǎn)忘了，上面#d li定義了 border為1px，則#d li的寬度總和為100% 10px了，趕緊去掉再試試——這回似乎可以了，再也沒有出現(xiàn)上面的現(xiàn)象，IE似乎沒有對(duì)#d li的實(shí)際寬度進(jìn)行四舍五入算法。難道這里就不能再額外設(shè)定#d li的 border和padding了嗎？
這還不算，最糟糕的是：
假如#d li的節(jié)點(diǎn)數(shù)為3/7/9/11……等等根本不能均分#d寬度的值，你又得分別設(shè)定每個(gè)#d li的百分比，使它們的總和等于100%了。而且依舊不能再額外設(shè)定#d li的border和padding

另外：在#d的寬度為固定尺寸下，設(shè)定的#d li為百分比時(shí)，有時(shí)也會(huì)出現(xiàn)一些你不想看見的問題，相信很多朋友也碰到過。不了解的可以自己試試。