IE7 relativer / absoluter Positionierungsfehler mit dynamisch geändertem Seiteninhalt

Question

Mar 18, 2010, 09:34 PM

internet-explorer-7 absolute relative css

IE7 relativer / absoluter Positionierungsfehler mit dynamisch geändertem Seiteninhalt

Ich habe mich gefragt, ob jemand eine Idee hat, wie er mit dem folgenden Problem in IE7 umgehen kann:

<!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 ausführen, werden Sie feststellen, dass das "footer" -Element nach dem Ändern des CSS für "panel" erhalten bleibt. Das gleiche Beispiel, das in IE8, FF und Chrome getestet wurde, verhält sich genau wie erwartet.

Ich habe bereits versucht, die Klasse des Elements zu aktualisieren, aber dies funktioniert nicht, wenn das Fenster des Browsers maximiert geöffnet wurde und keine weiteren Größenänderungen am Fenster vorgenommen wurden (das sind etwa 90% der Anwendungsfälle, die wir für unser Produkt haben ... . :() Ich stecke bei einer CSS-basierten Lösung fest, aber ich denke, dass ich in diesem Fall eine Ausnahme machen kann, wenn sie leicht IE7-spezifisch gemacht werden kann (was bedeutet, dass sich andere Browser auf diese Weise normal verhalten). .

Bitte helfen Sie!