css - IE7 Z-Index レイヤー化の問題

Question

IE7 のz-indexバグの小さなテストケースを分離しましたが、修正方法がわかりません。私は一日中遊んでいz-indexます。

z-indexIE7 の何が問題になっていますか?

CSS のテスト:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

HTML のテスト:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

score 269 · Accepted Answer

Z-index は絶対的な測定値ではありません。それぞれの要素が異なるスタッキングコンテキストに属している限り、z-index: 1000 の要素が z-index: 1 の要素の後ろにある可能性があります。

z-index を指定すると、同じスタッキングコンテキスト内の他の要素に対して相対的に指定されます。また、CSS 仕様の Z-index に関する段落では、新しいスタッキングコンテキストは、z-index 以外の位置付けられたコンテンツに対してのみ作成されると述べていますが、 auto (ドキュメント全体が単一のスタッキングコンテキストであることを意味します)、配置されたスパンを構築しました: 残念ながら、IE7 は z-index なしで配置されたコンテンツを新しいスタッキングコンテキストとして解釈します。

つまり、次の CSS を追加してみてください。

#envelope-1 {position:relative; z-index:1;}

または、スパンが position:relative を持たないようにドキュメントを再設計します。

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

このバグの同様の例については、http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/を参照してください。親要素 (この例では envelope-1) に高い z-index が機能する理由は、envelope-1 のすべての子 (メニューを含む) が、envelope-1 のすべての兄弟 (特に、envelope-2) とオーバーラップするためです。

z-index を使用すると、重なり方を明示的に定義できますが、z-index がなくても、レイヤーの順序は明確に定義されています。最後に、IE6 には、選択ボックスと iframe が他のすべての上に浮いてしまうバグが追加されています。

score 15 · Accepted Answer

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

score 11 · Accepted Answer

IE では、配置された要素は、0 の z-index 値から始まる新しいスタッキングコンテキストを生成します。したがって、z-index は正しく機能しません。

バグを修正するには、親要素の z-index 値を高くしてください (子の z-index 値自体よりも高くなる場合もあります)。

score 4 · Accepted Answer

私はこの問題に遭遇しましたが、HTMLの変更を要求する必要があり、全体的な問題になった大規模なプロジェクトで、純粋なcssソリューションを探していました。

position:relative; z-index:-1本体のコンテンツにヘッダードロップダウンコンテンツを配置すると、ie7の本文のコンテンツの上に突然表示されます（他のすべてのブラウザーとie8 +では問題なく表示されていました）

それに関する問題は、これが要素内のすべてのコンテンツに対するすべてのホバーとクリックのアクションを無効にすることでした。そのz-index:-1ため、ページ全体の親要素に移動して、position:relative; z-index:1

これにより、問題が修正され、正しいレイヤリング機能が保持されました。

少しハッキーな感じがしますが、必要に応じて動作しました。

score 3 · Accepted Answer

ie7 固有のスタイルシートの div に特別な z-index 指定を配置する必要があることがわかりました。

div { z-index:10; }

nav などの無関係な div の z-index をスライダーの上に表示します。スライダー div 自体に z-index を単純に追加することはできませんでした。

score 2 · Accepted Answer

前述の親ノードのより高い z-indexing がニーズに合わない場合は、別のソリューションを作成し、IE の条件付きコメントまたは Modernizr によって提供される (より理想的な) 機能検出を使用して、問題のあるブラウザーをターゲットにすることができます。

Modernizr の簡単な (そして明らかに機能する) テスト:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

score 1 · Accepted Answer

css標準に対する理解が異なるだけで、バグではないようです。外側のコンテナーに z-index が指定されていない場合、内側の要素にはより高い z-index が指定されています。そのため、コンテナーの兄弟は、高い z-index 要素をオーバーレイする可能性があります。そのような場合でも、IE7 でのみ発生しますが、IE6、IE8、Firefox では問題ありません。

score 0 · Accepted Answer

このバグは、標準の個別のスタッキングコンテキストIEのバグとは多少別の問題のようです。複数のスタック入力（基本的に、各行にオートコンプリートがあるテーブル）でも同様の問題が発生しました。私が見つけた唯一の解決策は、各セルに減少するz-index値を与えることでした。

score 0 · Accepted Answer

一般に、IE6 では、特定の UI 要素がネイティブコントロールで実装されます。これらのコントロールは、完全に別のフェーズ (ウィンドウ?) でレンダリングされ、z-index に関係なく、常に他のコントロールの上に表示されます。選択ボックスは、そのような問題のある別のコントロールです。

この問題を回避する唯一の方法は、IE が別の「ウィンドウ」としてレンダリングするコンテンツを作成することです。つまり、テキストボックスまたは iframe の上に選択ボックスを配置できます。

つまり、IE がこれらを組み込みの UI コントロールの上に配置できるようにするには、iframe にメニューなどの「ホバー」のようなものを配置する必要があります。

これは IE7 で修正されているはずですが ( http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspxを参照)、何らかの互換モードで実行している可能性がありますか?

score 0 · Accepted Answer

I solved it by using the developer tools for IE7 (its a toolbar) and adding a negative z-index to the container of the div that will be below that the other div.

css - IE7 Z-Index レイヤー化の問題

11 に答える 11

Related

Reference