CSS：IE7的表和表格单元格替换

Question

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

这就是我所拥有的。在大多数浏览器中，菜单看起来都是水平的。但是在IE7和更低的课程中它是另一回事，它在那里是垂直的。

我发现这是因为他们不支持table，table-cell。

我尝试了一些黑客，因为你可以在CSS的第一行看到它，但它不太有用，这只显示3 li horisontal然后它创建新行并显示其他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更容易添加子菜单。