2

私はこれを1日以上理解しようとしてきたので、助けていただければ幸いです。ul/li で構成された Suckerfish メニューがあります。トップダウン スクロール インジケーターをメニューに追加しようとしています。私の例では、今のところメニュー内に配置されている青と緑のインジケーターがあります。これらのインジケータは、UL 内の別の LI ですが、スタイルが異なります。固定トップで絶対に配置しました。firefox を使用した例を見て、Blah レポートにカーソルを合わせると、2 つのインジケーターが表示されていることがわかります。

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

IE7 で開いて Blah レポートにカーソルを合わせると、表示されません。ただし、サブメニューが展開されているときにサブ項目の 1 つ (コンプライアンスなど) にカーソルを合わせると、インジケーターが表示されます。サブメニューが展開されたときにインジケーターを表示するために何が変更されているのかわかりません。

これを IE で動作させるために何が欠けているかについて、誰かが私にヒントやヒントを与えることができれば、本当に感謝しています。

ありがとう、ラウル

ps) quirks モードを使用する必要があります

更新 したがって、ULが非表示になり、ULが表示されたときにIEが戻って位置を再計算しないため、IEは絶対位置要素を解決しないという事実に絞り込みました.ULが表示されるまで待つと、私はクラスをインジケーターに再割り当てして、要素が表示されるように見える要素の位置をリセットします。インジケーターがメニューと共にフェードインせず、事後に表示されるようになったため、理想的ではありません。

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

4

3 に答える 3

0

興味のある方のために考えました。IEで発生するのは、親要素がdisplay：noneからdisplay：blockに変更された場合、絶対位置にある子要素がレイアウトエンジンで処理されないため、初期オフセットが設定されないことです。

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

レイアウトエンジンを強制的に更新する理由は、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);
    }
}
于 2010-08-10T20:59:57.987 に答える
0

これを見てください、それはしばらく前に私のために働きました。それがあなたが探しているものであるかどうかは100％確実ではありませんが、誰かに役立つかもしれません

于 2010-08-10T15:06:43.943 に答える
0

注意すべき点がいくつかあります。

z-indexed 要素はすべてposition: relativeorposition: absoluteまたは である必要があります。 そうしないと、IE 6 および 7 はそれらを正しく処理しません。

また、IE 6 および 7 は、すべての要素ではなく、兄弟要素に相対的な z-index を扱います。例 =>

<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

于 2010-08-10T18:47:03.857 に答える