CSS：表和表单元替换为IE7 [英] CSS: table and table-cell replacement for IE7

问题描述

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

这是我有的。在大多数浏览器中菜单看起来是水平的。但在IE7和更低的当然是别的东西，它是垂直的。

This what i have. The menu looks right is horisontal in most browsers. But in IE7 and lower ofcourse it is something else, it is vertical there.

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

I found out this is because they dont support table, table-cell.

我试过一些黑客，你可以看到在CSS的第一行，但它不工作，这只显示3李水平，然后它使新的线和显示其他李的。

I tried some hacks as you can see in the first lines in the CSS, but it does not quite work, this do only show 3 li horisontal and then it makes new line and show the other li's.

我想让它显示为其他新的浏览器，所以它的一行水平。

I want it to appear as the other new browsers, so its one line horisontal.

如何使这项工作？

推荐答案

方法来实现这一点。第一个：

There are two ways to accomplish this. The first:

#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 */
    }    

>

The second:

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

我个人使用第一个，因为它提供了更多的控制样式块的颜色，宽度，高度，边距，填充等。加上，当你做：悬停整个框是一个链接;不只是文本。我的建议是不使用表。结果是不可预测的，因为你看到。更何况，现在它更容易添加子菜单，使用JQuery或CSS。

Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.

这篇关于CSS：表和表单元替换为IE7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！