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

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;

简单错误，难以调试。