Question

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

非常感谢任何帮助。

编辑：此处包含的代码和为了清晰起见从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-index上的表现并不是很好，在这个主题上可能有很多单独的SO问题。

下拉菜单未在IE / Internet Explorer中显示（Z-Index Stacking Issue？）

1 个答案: