眾所周知，FF和OPERA即其它遵循CSS2標准的浏覽器由於版本的不斷改進，早就支持:
display:table
dispaly:table-cell
dispaly:table-row
dispaly:table-row- group
dispaly:table-column
dispaly:table-column-group
等屬性。
(至少是 FF1.0,OPERA7就能支持了，之前的就不太清楚了)那還猶豫什麼?開始動手吧(為了演示加了一些 padding和border):
IE不支持該效果，FF和OPERA下看看。
上面的示例分別定義了
#d{
display:table;
}
#d ul{
display:table-row-group;
}
#d li{
display:table-cell;
}那麼它們在CSS2的樣式裡表現就分別相當於表格的
<tabel>
<tr>
<td>標簽，這樣上面第一個示例裡的5個 <li>就自然的被均分橫向排列在#b和#b ul裡，一切都很正常，表格都是這麼解釋的。然而，細心的朋友又會想到另一個問題，當#d的寬度不能被所包含的#d li的節點數整除，#d li的寬度又是如何均分#d的寬度呢？它在浏覽器下寬度尺寸又是如何表現的呢？為了說明問題，重新定義一個不被#d li的節點數整除的#d的寬度，這裡任意給個799px，在FF/opera下測試看看:
這個在IE下就不用測試了，我也沒加非IE的判定，偷了個懶。
既然FF和OPERA都基於上述原理來解釋這種類似表格的樣式，IE又不支持，何不為其設定一個相同的解釋機制呢？
我們先來看看IE下我們所能做作的：
這裡定義了#d li向左浮動，也分別定義了它們的寬度（注：這裡因為設定了其border為1px，寬度就是158px了）。為了防止FF/OPERA識別浮動，用了_float:left;
OK——這回可以在IE下測試了——相當完美！當然FF/OPERA下當然也一樣到此，如果你認為問題解決了，並且你平時也是這麼做的——那麼你現在可以關閉這個話題了，該忙什麼就忙什麼吧！
然而，問題是當我們的設定#d的寬度為798px呢？——那再給倒數第二個#d li加個樣式來設定寬度width:157px不就得了？那如果再重新設定#d的寬度為797px、796px……呢？（也許你設計完成一個頁面後再也不會動這些寬度尺寸了）但再麻煩點的是如果#d li的節點數需要調整了——表現為我們在日常的網站開發和維護中往往會增加或減少這種導航列表欄目，是否還要重新計算和分別設定這些#d li的寬度呢？
這不算很麻煩，我的數學還不至於那麼差勁——也許你會說。
但真正麻煩的是：當我們在做一個按百分比來進行頁面及橫向導航的設計時，這些#d li的寬度又該如何設定呢？還是實例為王，下面只是對上面的示例做個小小的改動，還好是5個#d li節點，正好每個寬度是20％：
測試好像也很不錯，似乎沒什麼不如意的地方（可能在有些機器上會折行）。再調整一下分辨率看看 ——還是挺好的啊（可能在有些機器上會折行）！那麼你在試試縮小IE窗口（不是最小化到任務欄），如果還是正常的話（相信有些朋友的導航效果已經開始出現折行了）——我會有辦法讓你沮喪的把你的鼠標放在縮小後的IE窗口的右邊框上，橫向逐漸逐漸拖動縮放IE的窗口——不用多說，很多朋友肯定早已明白這當中的原由，這裡啰嗦一下主要是針對一些不太明白的新人，老人就忽略這段吧簡單說一下：
上例中設定的#d的百分比寬度為80%，那麼這個寬度自然會隨著IE窗口大小的改變而改變，如果調整後的IE窗口為999，那麼這時這個#d的實際寬度為 792，這個寬度自然不能被#d li的節點數整除，也就是20%寬度不為整數（浏覽器顯示的最小單位是1象素，不能再分了，可能是四捨五入），很自然就會出現#d li的寬度和大於#d的實際寬度而導致折行現象了。
天哪！差點忘了，上面#d li定義了 border為1px，則#d li的寬度總和為100%+10px了，趕緊去掉再試試——這回好像可以了，再也沒有出現上面的現象，IE好像沒有對#d li的實際寬度進行四捨五入算法。難道這裡就不能再額外設定#d li的 border和padding了嗎？
這還不算，最糟糕的是：
如果#d li的節點數為3/7/9/11……等等根本不能均分#d寬度的值，你又得分別設定每個#d li的百分比，使它們的總和等於100%了。而且依舊不能再額外設定#d li的border和padding
另外：在#d的寬度為固定尺寸下，設定的#d li為百分比時，有時也會出現一些你不想看見的問題，相信很多朋友也遇到過。不了解的可以自己試試。