1

我想我在 ie 中遇到了 z-index 堆叠问题。下拉菜单显示在 Firefox 中，但不显示在任何版本的 ie 中（请参阅以下 js fiddle http://jsfiddle.net/MdUKd/15/）。我试图通过向每个具有相对位置的父元素添加更高的 z-index 来解决这个问题，但它仍然无法正常工作。

任何帮助将非常感激。

编辑：为了清楚起见，此处包含的代码和从 js fiddle 中删除的 javascript（下拉菜单在没有 js 的情况下仍然可以工作）。

HTML：

<div id="nav" style="z-index: 5">
<div id="nav-inner">
    <ul class="main-menu dropdown" style="z-index: 4">
        <li class="menuItem2 parent" style="z-index: 3">
            <a href="#">VISIT</a>
            <ul class="nccUlMenuSub1" style="z-index: 2">
                <li class="menuItem1 first"><a href="#">Tours</a></li>
                <li class="menuItem2"><a href="#">Directions</a></li>         
            </ul>
        </li>
    </ul>
</div>
</div>

CSS：

#nav
{
    background: #911201;
    background: linear-gradient(top,#911201 0,#780202 100%);
    background: -moz-linear-gradient(top,#911201 0,#780202 100%);
    background: -ms-linear-gradient(top,#911201 0,#780202 100%);
    background: -o-linear-gradient(top,#911201 0,#780202 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#911201),color-stop(100%,#780202));
    background: -webkit-linear-gradient(top,#911201 0,#780202 100%);
    filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#911201',endColorstr='#780202',GradientType=0);
    height: 40px;
    position: relative;
    z-index: 4;
}
#nav ul
{
    list-style: none;
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav ul li
{
    border: 1px solid #17203D;
    border-right: 0;
    float: left;
    height: 38px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 126px;
    zoom: 1;
}
#nav ul li.hover,#nav ul li:hover
{
    position: relative;
}
#nav ul a
{
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
}
#nav ul li.last
{
    border-right: 1px solid #17203D;
    width: 129px;
}
#nav ul a:hover,#nav ul a.selected
{
    background: #17203D;
    color: #E3E1D5;
}
#nav ul ul
{
    left: -1px;
    position: absolute;
    top: 38px;
    visibility: hidden;
}
#nav ul .last.parent ul
{
    left: auto;
    right: -1px!important;
}
#nav ul ul li,#nav ul ul li.last
{
    border: 0;
    display: inline;
    float: none;
    font-weight: normal;
    width: 175px;
}
#nav ul ul li a
{
    background: #17203D;
    color: #FFF;
    display: block;
}
#nav ul ul li a:hover,#nav ul ul li a.selected
{
    background: #780202;
    color: #FFF;
}
#nav ul ul li a
{
    border-right: none;
    display: inline-block;
    width: 100%;
}
#nav ul ul ul
{
    left: 100%;
    top: 0;
}
#nav ul li:hover>ul
{
    visibility: visible;
}
4

1 回答 1

3

您仍然在问题中发布了很多代码。如果您在这种情况下开始剥离看似不相关的 CSS 规则以使问题尽可能“纯粹”，这会有所帮助。从边框颜色、-1px 的边距等开始，然后按照自己的方式制定更相关的规则。

当我对发布的代码执行此操作时，我几乎直接发现了问题：

filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#911201',endColorstr='#780202',GradientType=0);

删除那行，事情开始在 IE 中工作。

起初这让我有点惊讶，但它是有道理的：渐变是那里最“特定于 IE”的东西，解释了为什么只有 IE 有这个问题。

显然梯度过滤器在 z-index 上的表现不是很好，关于这个主题可能有很多单独的 SO 问题。

于 2012-08-05T12:31:49.797 回答