Css Z索引在IE8和IE7中不起作用

Css Z索引在IE8和IE7中不起作用,css,z-index,Css,Z Index,我的网站上的导航选项卡在上有问题。 每个选项卡都是一个格式化的绝对定位锚元素。一旦你点击了一个标签,它就会被激活,这基本上意味着被点击的锚的背景图像将变为“活动版本”。活动版本具有z索引9999,非活动版本1,因此活动版本可以与非活动版本重叠。即使在IE中,它也可以正常工作。然而,当我点击最后一个选项卡,然后再次点击第一个选项卡时,第一个活动选项卡将显示在第二个非活动选项卡下。为什么?此问题仅在IE8和IE7中出现。有人能帮我吗?谢谢 <div id="menu">

我的网站上的导航选项卡在上有问题。 每个选项卡都是一个格式化的绝对定位锚元素。一旦你点击了一个标签,它就会被激活,这基本上意味着被点击的锚的背景图像将变为“活动版本”。活动版本具有z索引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;
}

#菜单{
宽度:500px;高度:27px;
左边距:300px;
利润上限:-27px;
溢出:隐藏;
}
#菜单a{
显示:块;
背景重复:无重复;
浮动:左;
位置:绝对位置;
字体大小:15px;
颜色:#808080;文字装饰:无;文字对齐:居中;
}
#菜单,激活{
宽度:139px;高度:27px;
线高:29px;
背景图像:url('/images/button active.png');
z指数:9999!重要;
}
#菜单。不活动{
宽度:117px;高度:22px;
线高:20px;
边缘顶部:5px;
背景图像:url('/images/button inactive.png');
z指数:1px!重要;
}
#菜单.about.active{
左边距:-10px;
}
#菜单、服务{
左边距:120像素;
}
#menu.services.active{
左边距:110像素;
}
#菜单,联系{
左边距:240px;
}
#menu.contact.active{
左边距:230像素;
}
将此更改为:

z-index: 1 !important;

简单的错误,很难调试。

不幸的是,这只是一个输入错误,在我的代码中没有问题。换句话说,它并没有解决我的问题:(啊,抱歉。好吧,你不需要在z索引之后使用!重要,因为这只会覆盖内联样式。另外,尝试将活动的z索引设置为10,而不是9999。此外,这可能会有所帮助:本主题中提到的文章实际上很有帮助,尽管我已经看过本主题并阅读了文章。我可能在尝试时搞砸了用这个技巧解决我的问题。无论如何,非常感谢:)
z-index: 1 !important;