30

IE7で次の問題に取り組む方法を知っている人がいるかどうか疑問に思っていました:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>IE7 absolute positioning bug</title>
    <style type="text/css">
      #panel { position: relative; border: solid 1px black; } 
      #spacer { height: 100px; } 
      #footer { position: absolute; bottom: 0px; }
    </style>
    <script type="text/javascript"> 
      function toggle() { 
        var spacer = document.getElementById("spacer"); 
        var style = "block"; 
        if (spacer.style.display == "block" || spacer.style.display == "") { 
          style = "none"; 
        }
        spacer.style.display = style;
      }
    </script>
  </head>
  <body>
    <div id="panel">
      <button onclick="toggle();">Click me</button>
      <br /><br /><br />
      <div id="spacer"></div>
      <div id="footer">This is some footer</div>
    </div>
  </body>
</html>

これを IE7 で実行すると、「パネル」の CSS を変更した後も「フッター」要素が残っていることがわかります。IE8、FF、および Chrome でテストされた同じ例は、期待どおりに動作します。

すでに要素のクラスを更新しようとしましたが、ブラウザーのウィンドウが最大化されて開かれ、ウィンドウのサイズがさらに変更されていない場合、これは機能しません (これは、製品のユースケースの約 90% です... . :( ) 私は CSS ベースのソリューションで行き詰まっていますが、IE7 固有のものを簡単に作成できる場合 (つまり、他のブラウザーがこれで標準的な方法で動作することを意味します)、例外を作成できると思います。 .

助けてください！

4

3 に答える 3

68

これは IE の「hasLayout バグ」に関連しています。相対的に配置された#panel親にはレイアウトがないため、IE はサイズ変更/再配置されたときに子を再描画するのを忘れます。

overflow: hidden;相対的に配置された#panel親に追加すると、問題が発生します。

#panel { position: relative; overflow: hidden; border: solid 1px black; }

この IE バグに関する詳細な背景情報は、優れたリファレンス「レイアウトの設定について」に記載されています。特定の問題については、「相対的に配置された要素」の章を参照してください。

position: relativeは hasLayout をトリガーしないことに注意してください。これにより、一部のレンダリング エラーが発生し、ほとんどの場合、コンテンツが消えたり、間違って配置されたりします。ページのリロード、ウィンドウのサイズ変更、スクロール、選択によって矛盾が発生する可能性があります。このプロパティを使用すると、IE は要素をオフセットしますが、レイアウトの子要素に「再描画」を送信するのを忘れているようです(レイアウト要素は再描画イベントのシグナル チェーンで正しく送信されるため)。

このプロパティは、要素がレイアウトを持つようにトリガーします。「レイアウトの由来」overflowの章も参照してください。

IE7 以降overflow、レイアウト トリガーになりました。

于 2010-03-18T20:45:58.647 に答える
2

この解決策は、必ずしも動的コンテンツとは関係ありませんが、私にとってはうまくいきました (少なくとも、ページが扱いやすい程度に壊れました)。IEツールでくだらない「クリックで要素を選択」ツール（ctrl + B）を使用すると、IE7がdivに幅がないと考えていたことに気付きました。

于 2011-08-11T16:44:59.530 に答える
0

再描画をトリガーする関数を作成しました。正しい解決策ではないかもしれませんが、うまくいきます。

// Script to fix js positon bug on IE7

// Use that function, recomended delay: 700
function ie7fixElementDelayed(elements, delay) {
    window.setTimeout(
        function () {
            if(navigator.appVersion.indexOf("MSIE 7.") != -1) {
                ie7fixElement(elements);
            }
        },
        delay
    );
}

function ie7fixElement(elements) {
    elements.each(function(i) {
        var element = $(this);
        var orginalDisplayValue = element.css("display");

        element.css("display", "none");
        element.css("display", orginalDisplayValue);
    });
}

使用例:

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
于 2013-07-16T14:03:26.937 に答える