IE7 relativa / insetto posizionamento assoluto con contenuto pagina modificata dinamicamente

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

Domanda

Mi chiedevo se c'è qualcuno che ha un'idea di come affrontare con il seguente problema in 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>

Quando si esegue questo in IE7 vedrai che l'elemento "footer" rimane dopo aver modificato il CSS per "panel". Lo stesso esempio testato in IE8, FF e Chrome si comporta esattamente come previsto.

Ho già provato ad aggiornare la classe del elemento, ma questo non funziona se la finestra del browser è stato aperto massimizzata e ulteriori modifiche dimensioni sono stati fatti per la finestra (che è di circa il 90% dei casi d'uso che abbiamo per il nostro prodotto .... :() Sono bloccato con una soluzione basato su CSS però penso che posso fare un'eccezione in questo caso se si può facilmente essere reso IE7-specifica (il che significa che gli altri browser si comportano in un modo standard con questo).

Si prega di aiutare!

È stato utile?

Soluzione

Questo è legato alla "hasLayout bug" di IE. Il genitore #panel posizionato in modo relativo non ha il layout e quindi IE dimentica di ridisegnare i propri figli quando si ottiene ridimensionata / riposizionato.

Il problema andrà se si aggiungono overflow: hidden; al genitore #panel posizionato in modo relativo. 

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

In profondità le informazioni di base su questo bug di IE può essere trovato nel riferimento eccellente "On avere layout" e poi per il vostro problema particolare in particolare il capitolo "elementi posizionati relativamente" :

  

Si noti che position: relative non si innesca hasLayout, che porta ad alcuni errori di rendering, per lo più scomparendo o contenuti fuori luogo. Le incoerenze potrebbero essere incontrate da ricaricare la pagina, la finestra di ridimensionamento e scorrimento, la selezione. Con questa proprietà, IE compensa l'elemento, ma sembra dimenticare di inviare un “ridisegnare” ai suoi elementi di layout figlio (come elemento di layout avrebbe inviato correttamente nella catena del segnale di ridisegnare gli eventi).

La proprietà overflow attiva l'elemento di avere il layout, si veda anche il capitolo "Dove layout Viene da ":

  

Come di IE7, overflow diventato un layout-trigger.

Altri suggerimenti

Questa soluzione non deve necessariamente a che fare con contenuti dinamici, ma ha funzionato per me (almeno la prima pagina borked in misura gestibile): specificare le dimensioni . Ho notato solo IE7 pensato che un div non ha avuto una larghezza quando si utilizza il 'elemento Selezione per click' scadente strumento (Ctrl + B) in strumenti di IE.

Ho creato la mia funzione di innescare ridisegno. Forse non è una soluzione giusta, ma funziona. 

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

Utilizzo di esempio: 

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top