2

このjsFiddleを確認してください。

IE7 では、上記の jsFiddle のコードは(.sbOptions)、次の selectbox 要素の下にドロップダウンを表示します(.sbHolder)。

.sbOptionsはありますz-index: 100;が、まだ の下に表示されています.sbHolder。

これは IE7 を除くすべてのブラウザで正常に動作しますが、これを解決する方法はありますか?

4

4 に答える 4

1

IE7 にはエラーがあります。z -indexを設定せず、hasLayout が true に設定されている限り、配置された要素にスタック コンテキストが割り当てられます。.sbHolder の幅と高さは、そのような hasLayout トリガーです。したがって、2 番目の .sbHolder が一番上にあります。

IE7 はルールを次のように変更します。

.sbHolder {
    position: relative;
    width: 130px;
    height: 30px;
    display: block;
    margin-bottom: 20px;
    z-index: 0; /* ! */
}

これは、.sbOptions が .sbHolder の不規則なスタック コンテキストによってキャッチされるため、.sbOptions の z-index を増やす計画を台無しにします。

一度に .sbOptions が 1 つだけドロップされるという点で、IE <=7 の解決策があります。これはスクラッチになりますか？そう願いましょう！

試してみてください: http://jsfiddle.net/HRubx/

必要に応じて、不規則なスタック コンテキストが生成されるようになりました。

li:hover {
    position: relative;
}
于 2013-05-08T22:27:48.770 に答える
0

マークアップをあまり変更できない場合は、上記のように親の div に z-index を追加してください。

<div class="sbHolder" style="z-index:11">
    <a href="#" class="sbToggle"></a>
    <a href="#" class="sbSelector">1</a>

    <ul class="sbOptions">
         <li><a href="#1">1</a></li>
         <li><a href="#2">2</a></li>
         <li><a href="#3">3</a></li>
         <li><a href="#4">4</a></li>
    </ul>
</div>

<div class="sbHolder" style="z-index:10">
    <a href="#" class="sbToggle"></a>
    <a href="#" class="sbSelector">A</a>

    <ul class="sbOptions">
        <li><a href="#1">A</a></li>
        <li><a href="#2">B</a></li>
        <li><a href="#3">C</a></li>
        <li><a href="#4">D</a></li>
    </ul>
</div>
于 2013-05-08T20:05:00.687 に答える
0

この記事を見てください。

つまり、jquery を使用して、他の要素を変更して z-index を並べ替えます。

IE7 に関する多くの問題を修正する 1 つの方法は、ページ上の要素のデフォルトの z-index スタック順を動的に逆にすることです。これにより、HTML ソースの上位にある要素ほど、ページの z-index 順序も高くなり、IE スタックの問題のほとんどが解決されます。

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});
于 2013-05-08T20:03:58.857 に答える