IE7 relative / absolute Positionierung Fehler mit dynamisch modifiziert Seiteninhalt

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

Frage

Ich habe mich gefragt, ob jemand eine Idee hat, wie man mit dem folgenden Problem in IE7 zu bewältigen: 

<!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>

Wenn Sie dies in IE7 laufen Sie sehen, dass die „Fußzeile“ Element bleibt nach der CSS für „Panel“ zu ändern. Das gleiche Beispiel getestet in IE8, FF und Chrome verhält sich genau wie erwartet.

Ich habe schon versucht, das Element der Klasse modernisiert werden, aber das funktioniert nicht, wenn das Fenster des Browsers an das Fenster maximiert und keine weiteren Größe Änderungen vorgenommen wurden (was etwa 90% der Anwendungsfälle die wir für unser Produkt ist geöffnet wurde .... :() Ich bin fest mit einer CSS-basierten Lösung aber ich denke, dass ich eine Ausnahme in diesem Fall machen kann, wenn sie leicht IE7 spezifisch gemacht werden können (was bedeutet, dass anderer Browser in üblichen Weise mit diesem verhalten wird).

Bitte Hilfe!

War es hilfreich?

Lösung

Dies ist auf den "hasLayout Bug" von IE bezogen. Die relativ positioniert #panel Eltern nicht über das Layout und daher vergisst IE seine Kinder neu zu zeichnen, wenn es verkleinert erhalten / neu positioniert.

Das Problem wird gehen, wenn Sie overflow: hidden; die relativ positionierten #panel Eltern hinzuzufügen. 

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

In der Tiefen Hintergrundinformationen zu diesem IE Fehler kann „On mit Layout“ in der hervorragenden Referenz finden und dann für Ihr spezielles Problem speziell das Kapitel „relativ positionierte Elemente“ :

  

Beachten Sie, dass position: relative nicht auslösen hasLayout, was zu einigen Rendering-Fehler, meistens oder verlegt Inhalt verschwinden. Inkonsistenzen können durch Neuladen der Seite, Fenstergröße und Bildlauf, Auswahl angetroffen werden. Mit dieser Eigenschaft ausgleicht IE das Element, aber scheint zu vergessen, eine „neu zu zeichnen“, um das Layout untergeordneten Elemente senden (als ein Layoutelement wäre richtig in der Signalkette von redraw Ereignissen gesendet werden).

Die overflow Eigenschaft löst das Element Layout zu haben, siehe auch das Kapitel "Wo Layout-Comes von ":

  

Ab IE7 wurde overflow ein Layout-Trigger.

Andere Tipps

Diese Lösung muss nicht unbedingt etwas mit dynamischen Inhalten zu tun hat, aber es funktioniert für mich (zumindest die Seite aus auf ein erträgliches Maß borked): angeben Dimensionen . Ich habe nur bemerkt IE7 dachte ein div nicht eine Breite hat, wenn das crappy ‚Select Element durch Klick‘ Werkzeug (Strg + B) in IE-Tool.

Ich habe meine Funktion Trigger redraw erstellt. Vielleicht ist es nicht eine richtige Lösung, aber es funktioniert. 

// 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);
    });
}

Verwendungsbeispiel: 

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top