56

Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.htmlを使用しています

だから私は彼らの「ドロップダウンメニュー」クラスを使っていくつかの簡単なクイックユースドロップダウンメニューを作成していますが、何らかの理由でIE7では私のサイトのテキストやその他の要素の後ろに表示されています.

リンクのテスト: http://leongaban.com/_projects/defakto/CDS/

CSS に z-index を追加しましたが、まだ何もしていないようです。助けてください!

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    z-index: 10000;
}

IE9、Chrome、FF、およびその他の最新の頭の痛いブラウザー: ここに画像の説明を入力

IE7 >:(
ここに画像の説明を入力

HTML

<div class="header-nav">

<ul id="nav-account" role="navigation" class="pull-right">

    <!-- Language Dropdown Button -->
    <li id="language-btn">
        <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->

        <!-- Language Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
        </ul>
    </li>

    <!-- User Dropdown Button -->
    <li id="account-btn">
        <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/>
        <!-- <span class="grey_triangle"></span> -->

        <!-- User Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
        </ul>
    </li>
</ul>
4

7 に答える 7

89

スタックコンテキストの問題です。

ドロップダウンで使用z-indexしている場合でも、同じスタック コンテキスト内の要素に対してのみ相対的です。z-indexこれを機能させるには、 aと apositionを親要素に追加する必要があります。この場合、私はheader-top div

于 2013-04-22T20:42:35.750 に答える
25

z-index配置された要素（相対、固定/絶対）でのみ使用できるため、追加してみてください：

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    position: relative;
    z-index: 10000;
}
于 2013-04-22T20:23:11.813 に答える