Błąd pozycjonowania względnego/bezwzględnego IE7 z dynamicznie modyfikowaną zawartością strony

Zastanawiałem się czy ktoś ma pomysł jak poradzić sobie z poniższym problemem w 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>

Po uruchomieniu tego w IE7 zobaczysz, że element " stopka "pozostaje po modyfikacji CSS dla"panelu". Ten sam przykład testowany w IE8, FF i Chrome zachowuje się dokładnie zgodnie z oczekiwaniami.

Próbowałem już zaktualizować klasę elementu, ale to nie działa, jeśli okno przeglądarki zostało otwarte i nie wprowadzono żadnych dalszych zmian rozmiaru w oknie (co jest około 90% przypadków użycia mamy dla naszego produktu.... :( ) Utknąłem z rozwiązaniem opartym na CSS, jednak myślę, że mogę zrobić wyjątek w tym przypadku, jeśli można łatwo zrobić specyficzny dla IE7(co oznacza, że inne przeglądarki będą zachowywać się w standardowy sposób z tym).

Proszę o pomoc!

Author: Matthias Hryniszak, 2010-03-18
Source

3 answers

Jest to związane z "błędem hasLayout" IE. Relatywnie umieszczony rodzic #panel nie ma układu i dlatego IE zapomina o przerysowaniu swoich dzieci, gdy zostanie zmieniony rozmiar / zmiana położenia.

Problem zniknie, jeśli dodasz overflow: hidden; do relatywnie położonego rodzica #panel.

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

Szczegółowe informacje o tym błędzie IE można znaleźć w doskonałej referencji " on having layout " , a następnie dla konkretnego problemu w rozdziale "relatywnie pozycjonowane elementy":

Zauważ, że position: relative nie uruchamia hasLayout, co prowadzi do pewnych błędów renderowania, głównie znikających Lub zagubionych treści. Niespójności można napotkać po przeładowaniu strony, zmianie rozmiaru okna i przewijaniu, wybraniu. Z tą właściwością, IE przesuwa element , ale wydaje się zapomnieć o wysłaniu "przerysowania" do jego elementów potomnych układu (jako element układu wysłałby poprawnie w łańcuchu sygnałowym przerysowania wydarzenia).

Właściwość overflow powoduje, że element ma układ, patrz także rozdział "skąd pochodzi układ":

Od IE7, overflow stał się layout-trigger.

 67
Author: BalusC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-05 00:23:17

To rozwiązanie nie musi mieć nic wspólnego z dynamiczną treścią, ale mi się to udało (przynajmniej sprawiło, że strona się borowiła do pewnego stopnia): podaj wymiary . Zauważyłem tylko, że IE7 myślał, że div nie ma szerokości podczas korzystania z gównianego narzędzia "Select element by click" (ctrl + B) W IE tools.

 2
Author: Sebastian Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-11 16:44:59

Stworzyłem swoją funkcję, aby wyzwalać przerysowanie. Może nie jest to właściwe rozwiązanie, ale działa.

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

Przykładowe użycie: 

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
 0
Author: MaciejLisCK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-16 14:03:26