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中无效。

有两种解决方案：

在<span>（或代替<li>）中添加<li>或类似的内嵌标记，并将其设置为inline-block。根据您的目标，这可能会或可能不会对您产生预期效果。
使用IE CSS hack。如果设置display:inline;和zoom:1;，则可以使IE7执行您想要的操作。这个组合将在inline-block应该工作的方式在IE6和IE7中工作。但是，您需要找到一种方法，使其仅在IE6 / 7中发生，因为显然您希望它在其他浏览器中使用inline-block。有各种CSS黑客可以针对这些浏览器，或者您可以使用条件注释。无论哪种方式，它都很混乱，但如果你想支持IE7，这是唯一真正的解决方案。

（这提出了第三种选择，即在您的网站中放弃对IE7的支持......）

Answer 2

根据http://caniuse.com/inline-block在IE 7中不完全支持（仅适用于默认情况下为内联的元素）。它在这里提到了替代方案...... http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

如果您的版本在IE7中看起来不错并且在较新的浏览器中看起来更好看，则条件注释可以帮助您，因此您将为不同的浏览器版本使用不同的代码

Answer 3

display: inline-block;
zoom:1;
*display: inline;

应该有效。确保您拥有有效的DOCTYPE集。如果还有其他内容触发hasLayout，您可以删除“zoom：1”。

内联块导致IE7出现问题

3 个答案: