web-dev-qa-db-ja.com

動的に変更されたページコンテンツに関するIE7の相対的/絶対配置のバグ

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固有に簡単に作成できる場合、この場合は例外を作成できると思います（つまり、他のブラウザーはこれで標準的な方法で動作します） 。

助けてください！

csscss-positioninternet-explorer-7
30
Matthias Hryniszak

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

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

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

これに関する詳細な背景情報IEバグは、優れたリファレンスで見つけることができます "レイアウトの問題について" そして、特定の問題については特に章 "相対的に配置された要素 " ：

position: relativeはhasLayoutをトリガーしないことに注意してください。これにより、レンダリングエラーが発生します。ほとんどの場合、コンテンツが表示されないか、置き忘れられます。ページの再読み込み、ウィンドウのサイズ変更とスクロール、選択によって不整合が発生する場合があります。このプロパティを使用すると、IE要素をオフセットしますが、レイアウトの子要素に「再描画」を送信するのを忘れているようです（レイアウト要素が再描画イベントのシグナルチェーンで正しく送信されたため）。

overflowプロパティは、要素にレイアウトをトリガーします。 "レイアウトの出所" の章も参照してください。

IE7の時点で、overflowはレイアウトトリガーになりました。

68
BalusC

このソリューションは、必ずしも動的コンテンツとは何の関係もありませんが、私にとってはうまくいきました（少なくとも管理可能な程度にページを退屈させました）：specificify dimensions。 IE7では、IEツールで、クリックで要素を選択する]ツール（ctrl + B）を使用すると、divに幅がないと考えられることに気づきました。

2
Sebastian Thomas

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

// 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);
0
MaciejLisCK