IE7 CSS Z-Indexは、Quirksモードで発行します

StackOverflow https://stackoverflow.com/questions/3450316

質問

私はこれを1日以上把握しようとしてきたので、どんな助けも感謝しています。 UL/LIで構成される吸盤メニューがあります。メニューにトップダウンスクロールインジケーターを追加しようとしています。私の例では、今のところメニュー内に配置されている青と緑のインジケーターがあります。これらの指標は、UL内の別のLIにすぎませんが、異なるスタイルです。私はそれらを絶対に固定トップで配置しました。 FirefoxとHover over Blah Reportsを使用して例を見ると、2つのインジケータが表示されます。

http://inthemind.com/test/test.html

IE7で開いて、Blahのレポートを越えてホバリングすると、表示されません。ただし、そのサブメニューが展開されると、サブアイテムの1つ（つまりコンプライアンス）の1つにホバリングすると、インジケータが表示されます。サブメニューが拡大すると、インジケータが表示されるように変化しているものがわかりません。

誰かが私にこれをIEで機能させるために何が欠けているかについてのヒントを私に与えることができれば、私はそれを本当に感謝するでしょう。

ありがとう、ラウル

PS）Quirksモードを使用する必要があります

アップデートだから私は、ULが隠されていて、つまり、ULが見えるようになったときに位置を再計算しないため、IEは絶対位置の要素を解決しないという事実に絞り込みました。 - クラスをインジケーターに割り当てて、要素の位置をリセットするようになります。今では私の指標がメニューで消えていないが、事実の後に現れるので、それは理想的ではありません。

他のヒントはありますか？

役に立ちましたか？

解決 3

さて、私は興味のある人のためにそれを理解しました。 IEで起こっているのは、親要素がディスプレイから変更された場合：none to Display：絶対に配置された子要素をブロックすることは、レイアウトエンジンで処理されないため、初期オフセットが設定されないことです。

したがって、あなたがしなければならないことは、親を表示するように設定することです。ブロック、インジケータLIのクラスをリセットして、レイアウトエンジンがキックするので、オフセットを呼び出すことでレイアウトエンジンにすべてをレイアウトする必要があります。要素が配置されたら、親を表示して表示できます。なし。

レイアウトエンジンに更新を強制する理由は、JavaScriptが完了するまでIEがすべてのスタイルの変更を合体することです。つまり、オフセットが再計算されないことを意味します。

問題を修正したコードは次のとおりです。

if ($.browser.msie && $.browser.version <= 7) {
    var il = $ul.data('indicatorLayedOut');
    if (il == null) { // We only have to do the layout once
        var $ind = $ul.find('>.indicator');
        $ul.css('visibility', 'hidden').css('display', 'block');

        // Force IE to re-style the indicators. If we omit this then the layout engine
        // will not update the position and cause the indicators to not show up
        $ind.addClass("indicator");

        // We then have to iterate through
        // and pull the offset so we can
        // force a dom update
        $ind.each(function() {
            var oy = this.offsetTop, ox = this.offsetLeft;
            //console.log("X: " + ox + ", Y: " + oy);
        });
        $ul.css('display', 'none').css('visibility', 'visible');

        $ul.data('indicatorLayedOut', true);
    }
}

他のヒント

見て これ それはしばらく前に私のために働いた。それがあなたが探しているものが誰かにとって役立つかどうか100％確信が持てない

留意すべきいくつかのこと：

Zインデックスされた要素はすべてあるはずです position: relative また position: absolute または、IE 6と7はそれらを正しく扱いません。

また、IE 6および7は、そのz-indexをそのz-indexと比較して扱います 兄弟 すべての要素ではなく、要素。 ex =>

<div style="z-index: 2;">
  <div id="d1" style="z-index: 1000"></div>
</div>
<div style="z-index: 1;">
  <div id="d2" style="z-index: 2000"></div>
</div>

この例では、＃D1が表示されます＃D2。

また、DOMの兄弟要素の順序を調整して、目的のZオーダーを取得することもできます。

jqueryを使用している場合、潜在的なクイックフィックス=>
http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top