CSS：用於IE7的表格和表格單元替換

Question

http://jsfiddle.net/vByVD/9/

這就是我所擁有的。菜單在大多數瀏覽器中看起來都是水平的。但在IE7和更低的課程中，這是另一回事，它在那裏是垂直的。

我發現這是因爲他們不支持table，table-cell。

我嘗試了一些黑客，你可以在CSS的第一行看到，但它並不完全正常工作，這隻會顯示3 li水平線，然後它會創建新行並顯示其他li。

我希望它作爲其他新的瀏覽器出現，所以它的一條水平線。

我該如何做這項工作？

Answer 1

有兩種方法可以做到這一點。第一：

#header-nav{ 
    overflow: hidden; 
    zoom: 1; /* IE6 and below work around */ 
} 

#header-nav li{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

#header-nav li a{ 
    display: block; /* if you want height and width */ 
    }  

第二種：

#header-nav li{ 
    margin: 0; 
    padding: 0; 
    display: inline; 
} 

我個人使用所述第一兩個的，因爲它提供了一種用於造型的塊爲顏色，寬度，高度，邊緣，填充更多的控制，等等。另外，當你做一個：懸停整個盒子時是一個鏈接;不只是文字。我的建議是不使用表格。如你所見，結果是不可預測的。更何況，現在使用JQuery或CSS更容易添加子菜單。