html - 内联 block 在 IE7 上造成问题

Question

几个月前，我为一家小公司制作了一个网站。他们对此非常高兴，等等。现在，我将为同一家公司做一个小型电子商务，并将其集成到站点库中。但是，我正在用 ie7 看它，发现了一些可怕的东西。导航栏未正确显示。通常在水平线上列出的链接在垂直线上。如何解决这个问题，这很紧急？

这是导航的 CSS:

.nav-ul  {
    margin: 0;
    padding: 0;
    position: absolute;
    left: -14px;
    top: 120px;
    background: #000;
    height: 31px;
    z-index:  2;
    width: 104%;
    background-image: nappulat/tyhja.png;
    background-repeat: repeat;
    text-align: center;
}

.nav-ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 128px;
    height: 31px;
}

.nav-ul li:hover {
    background-color: #b2080b;
}

.nav-ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-family: Verdana,  Geneva,  sans-serif;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 128px;
    height: 31px;
}

我知道有条件的评论，他们会给我答案吗？

Answer 1

IE7(和 IE6)有一些严重的错误 inline-block .

主要错误是它只适用于具有默认 display 的元素inline的风格.

<li>标签的默认样式为 list-item ，因此 display:inline-block;在 IE7 中不适用于他们。

有两种解决方法:

1. 添加 <span>或 <li> 内的类似内嵌标签(或者代替你的 <li> )并将其设置为 inline-block反而。这可能会或可能不会为您带来预期的效果，具体取决于您要实现的目标。

2. 使用 IE CSS hack。如果你设置 display:inline;，你可以让 IE7 做你想做的事。和 zoom:1; .这种组合将以 inline-block 的方式在 IE6 和 IE7 中工作。应该工作。不过，您需要想出一种方法让这只发生在 IE6/7 中，因为显然您会希望它使用 inline-block。在其他浏览器中。有多种针对这些浏览器的 CSS hack，或者您可以使用条件注释。无论哪种方式，它都是困惑的，但如果你想支持 IE7，这是唯一真正的解决方案。

(这会出现第三个选项，即在您的站点中放弃对 IE7 的支持...)