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

Question

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

这就是我所拥有的。在大多数浏览器中，看起来正确的菜单是水平的。但在 IE7 及更低版本中，它当然是另外一回事，它是垂直的。

我发现这是因为他们不支持表格、表格单元格。

我尝试了一些技巧，正如您在 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;
}

我个人使用两者中的第一个，因为它提供了更多的控制来设置颜色、宽度、高度、边距、填充等块的样式。另外，当您执行 a:hover 时，整个框是一个链接；不仅仅是文字。我的建议是不要使用表格。如您所见，结果是不可预测的。更不用说，现在添加子菜单更容易了，使用 JQuery 或 CSS。