IE7 relativa/bug posizionamento assoluto con il contenuto della pagina modificata dinamicamente

Mi chiedevo se c'è qualcuno che ha un'idea di come affrontare con il seguente problema in IE7:IE7 relativa/bug posizionamento assoluto con il contenuto della pagina modificata dinamicamente

<!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 vedrete che l'elemento "footer" rimane dopo aver modificato il CSS per "pannello". Lo stesso esempio testato in IE8, FF e Chrome si comporta esattamente come previsto.

Ho già provato ad aggiornare la classe dell'elemento ma questo non funziona se la finestra del browser è stata aperta al massimo e non sono state apportate ulteriori modifiche alle dimensioni della finestra (che rappresenta circa il 90% dei casi di utilizzo che abbiamo per il nostro prodotto .... :() Sono bloccato con una soluzione basata su CSS, tuttavia penso di poter fare un'eccezione in questo caso se può essere facilmente reso specifico per IE7 (il che significa che altri browser si comporteranno in un modo standard con questo).

Aiutateci!

fonte

2010-03-18 Matthias Hryniszak

Hai provato DOCTYPE per HTML o XHTML rigoroso-rigida di commutazione? Cosa succede allora? – NotMe

In effetti non l'ho fatto.Il problema è che non ho il controllo su quale doctype viene inviato al client (per ragioni che non posso discutere qui) quindi non sarebbe la soluzione anche se avesse funzionato ... –

2 anni dopo e questo la domanda (e la risposta) sono ancora incredibilmente utili! Mi sto sfondando la testa per un po '. Non riuscivo nemmeno a capire come formulare correttamente la domanda ... Grazie! –

questo è legato alla "hasLayout bug" di IE. il #panel genitore posizionato in modo relativo non ha il layout e quindi IE dimentica di ridisegnare i propri figli quando vengono ridimensionati/riposizionati.

Il problema andrà se si aggiunge overflow: hidden; al genitore relativamente posizionato #panel.

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

In profondità informazioni di base su questo bug di IE può essere trovato nel riferimento eccellente "On having layout" e poi per il vostro problema particolare in particolare il capitolo "Relatively positioned elements":

noti che position: relative non fa scattare hasLayout, che porta ad alcuni errori di rendering, per lo più contenuti in via di estinzione o fuori posto. Incongruenze potrebbero essere incontrate dalla ricarica della pagina, ridimensionamento e scorrimento della finestra, selezione. Con questa proprietà, IE compensa l'elemento, ma sembra dimenticare di inviare un "ridisegno" ai suoi elementi figlio di layout (come un elemento di layout avrebbe inviato correttamente nella catena del segnale degli eventi di ridisegno).

La proprietà overflow attiva l'elemento di avere il layout, si veda anche il capitolo "Where Layout Comes From":

Come di IE7, overflow diventato un layout-trigger.

fonte

2010-03-18 20:45:58 BalusC

Impossibile confermarlo in IE7 in IETester: l'intera faccenda scompare. Sei sicuro che sia questo? –

Questo è A M A Z I N G !!! Grazie!!! Ho lottato con questo per 2 giorni e non ho trovato una risposta. Grazie mille! –

Oh bene, sembra aver fatto il trucco - forse ho sbagliato il risultato desiderato. –

Questa soluzione non deve necessariamente nulla 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 che IE7 ha pensato che un div non avesse una larghezza quando si utilizzava lo strumento "Seleziona elemento per clic" (ctrl + B) schifoso negli strumenti di IE.

fonte

2011-08-11 16:44:59

Sono contento che funzioni, ma la tua risposta sarebbe più adatta per essere un commento piuttosto che una risposta. – webLacky3rdClass

Ho creato la mia funzione per avviare il 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 Esempio:

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);

fonte

2013-07-16 14:03:26 MaciejLisCK

IE7 relativa/bug posizionamento assoluto con il contenuto della pagina modificata dinamicamente

risposta

Problemi correlati