1
私はIE7のz-indexスタッキングバグを実行していますが、回避する方法が見つかりません。IE7 z-indexスタッキングバグ - どのように絶対配置された2つの要素を正しく積み重ねるのですか？
<!doctype html />
<html>
<head>
</head>
<body>
<div style="position:relative; width:500px;">
<div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">
<p style="margin:0;">Menu</p>
<ul style="position:absolute; z-index:100; list-style:none; margin:0; padding:0; background-color:#fff; border:1px solid #0000ff;">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
<div style="position:absolute; z-index:1; top:40px; width:500px; height:75px; background-color:#ccc;">
<p>Header</p>
</div>
</div>
</body>
</html>
この例では、トップレベルdivに絶対配置された要素が2つあることがわかります。最初のメニューはメニューで、2番目のメニューはヘッダーです。メニュー項目は正しく積み重ねられず、ヘッダーの後ろに表示されます。
私はIE7のzインデックスバグに関する記事をたくさん読んだが、私はこの特定の問題で私を助け何かを発見していません。ありがとう！
''有効なDOCTYPEではありません。代わりに '<！DOCTYPE html>'を使用してください。これにより、IEがquirksmodeを使用できなくなります。 – Zeta