Question

我的http://chillicom.pixia.cz/网站上的导航标签出现问题。每个选项卡都是格式化的绝对定位锚元素。单击选项卡后，它将变为活动状态，这基本上意味着单击锚点的背景图像将更改为其“活动版本”。活动版本具有z-index 9999，非活动版本1，因此活动版本可以与非活动版本重叠。它工作正常，即使在IE中也是如此。但是，当我单击最后一个选项卡而不是第一个选项卡时，第一个活动选项卡将显示在第二个不活动选项卡下。为什么？仅在IE8和IE7中会出现此问题。有人可以帮帮我吗？感谢

        <div id="menu">
            <a href="#" class="about active" name="about">about us</a>
            <a href="#" class="services inactive" name="services">services</a>
            <a href="#" class="contact inactive" name="contact">contact</a>
        </div>


#menu {
    width: 500px; height: 27px;
    margin-left: 300px;
    margin-top: -27px;
    overflow: hidden;
}

#menu a {
    display: block;
    background-repeat: no-repeat;
    float: left;
    position: absolute;
    font-size: 15px;
    color: #808080; text-decoration: none; text-align: center;
}

#menu .active {
    width: 139px; height: 27px;
    line-height: 29px;
    background-image: url('/images/button-active.png');
    z-index: 9999 !important;
}

#menu .inactive {
    width: 117px; height: 22px;
    line-height: 20px;
    margin-top: 5px;
    background-image: url('/images/button-inactive.png');
    z-index: 1px !important;
}

#menu .about.active {
    margin-left: -10px;
}

#menu .services {
    margin-left: 120px;
}

#menu .services.active {
    margin-left: 110px;
}

#menu .contact {
    margin-left: 240px;
}

#menu .contact.active {
    margin-left: 230px;
}

Answer 1

z-index: 1px !important;

将其更改为：

z-index: 1 !important;

简单错误，难以调试。

Z-index在IE8和IE7中不起作用

1 个答案: