IE/Internet Explorer中未显示下拉菜单(Z-Index Stacking Issue?)

Question

我想我在ie中遇到了z索引堆叠问题。下拉菜单显示在firefox中，但没有显示在任何版本的ie中（请参阅以下js-fiddlehttp://jsfiddle.net/MdUKd/15/)。我试图通过向每个具有相对位置的父元素添加更高的z索引来解决这个问题，但它仍然不起作用。

任何帮助都将不胜感激。

编辑：为了清晰起见，这里包含了代码，并从js中删除了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;
}

Answer 1

问题中仍然有很多代码。如果您在这种情况下开始剥离看似不相关的CSS规则，使问题尽可能"纯粹"，这会有所帮助。从边框颜色、-1px的边距等开始，然后按照更相关的规则进行操作。

当我对发布的代码进行处理时，我几乎直接发现了问题：

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

删除该行，IE中的工作就开始了。

起初，这让我有点惊讶，但这是有道理的：梯度是其中最"特定于IE"的东西，解释了为什么只有IE有这个问题。

显然，梯度滤波器对z索引的处理不太好，这个主题可能有很多单独的so问题。