1

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;
}
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 に答える