0

几个月前，我为一家小公司做了一个网站。他们对此非常满意，等等。现在，我将为同一家公司做一个小型电子商务，并将其集成到网站库中。但是，我用 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;
}

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

4

3 回答 3

3

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;。这种组合将以应该工作的方式在 IE6 和 IE7 中inline-block工作。不过，您需要找到一种方法让这种情况仅在 IE6/7 中发生，因为显然您希望它inline-block在其他浏览器中使用。有多种 CSS hack 可以针对这些浏览器，或者您可以使用条件注释。无论哪种方式，它都很混乱，但如果你想支持 IE7，这是唯一真正的解决方案。

（这带来了第三个选项，即在您的站点中放弃对 IE7 的支持......）

于 2012-07-24T20:14:59.670 回答
0

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

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

于 2012-07-24T20:11:41.337 回答
0 
display: inline-block;
zoom:1;
*display: inline;

应该管用。确保您有一个有效的 DOCTYPE 集。如果还有其他触发hasLayout的东西，您可以删除“zoom:1” 。

于 2012-07-24T20:56:06.077 回答