動的に変更されたページの内容とIE7の相対/絶対位置のバグ

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

質問

どのように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％であるウィンドウ（に行われなかった場合、これは動作しません。 .... :(） 私は簡単に（他のブラウザは、これに標準的な方法で行動することを意味する）IE7特定することができれば、私はこのような場合には例外を作ることができると思いますがCSSベースのソリューションでこだわっている。

助けてください！

役に立ちましたか？

解決

これはIEの「hasLayoutバグ」に関連しています。比較的位置付け#panel親は、レイアウトを持っていないので、IEは、それが再配置/リサイズを取得するとき、その子を再描画するのを忘れました。

あなたは比較的位置付けoverflow: hidden;親に#panelを追加する場合、問題が移動します。

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

このIEのバグについての奥行き背景情報においては、「レイアウトを有することに」優れた基準に見出すことができますと、あなたの特定の問題のために、特に、チャプターの「比較的位置付け要素」：

  

ほとんどが消失したり見当違いの内容、いくつかのレンダリング・エラーにつながる、そのposition: relativeはhasLayoutをトリガしません。不整合は、ウィンドウがサイズ変更やスクロール、選択、ページのリロードが遭遇するかもしれません。このプロパティを使用すると、IEは（レイアウト要素がイベントを再描画のシグナル・チェーンで正しく送信されてきたように）、要素を相殺するのが、そのレイアウト子要素に「再描画」を送ることを忘れているようです。

overflowプロパティは、レイアウトを持っている要素をトリガし、またレイアウトが来る章」を参照してください。 の "から：

  

IE7のように、overflowレイアウトトリガとなった。

他のヒント

このソリューションは、必ずしも動的なコンテンツとは何の関係もありませんが、それは（少なくとも管理可能な程度にborkedページを作った）私の仕事：の の寸法を指定します。 私はIE7がIEのツールで安っぽい「クリックで選択要素」ツール（Ctrl + B）を使用した場合のdivの幅を持っていなかったと思った気づきました。

私は、再描画をトリガするために、私の機能を作成しました。多分それは適切なソリューションではありませんが、それは動作します。

// 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);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top