IE CSS Bug - Come faccio a mantenere una posizione di assoluto quando dynamic javascript contenuto della pagina cambia
-
09-06-2019 - |
Domanda
Ho una pagina in cui c'è una colonna e un contenuto in un div, un po ' come questo:
<div id="container">
<div id="content">blahblahblah</div>
<div id="column"> </div>
</div>
Con alcuni styling ho un'immagine che è diviso tra la colonna e il contenuto, ma deve mantenere lo stesso posizionamento in verticale in modo che si allinei.
Lo stile è simile a questo:
#column
{
width:150px;
height:450px;
left:-150px;
bottom:-140px;
background:url(../images/image.png) no-repeat;
position:absolute;
z-index:1;
}
#container
{
background:transparent url(../images/container.png) no-repeat scroll left bottom;
position:relative;
width:100px;
}
Questo funziona alla grande quando il contenuto in #content
viene caricata dinamicamente prima del rendering.Questo funziona alla grande anche in firefox sempre.Tuttavia, in IE6 e IE7 se io uso javascript per modificare il contenuto (e quindi l'altezza) di #content
, le immagini non più in linea#column
non si sposta).Se io uso IE Developer Bar per aggiornare solo i div (dire aggiungere position:absolute manualmente) l'immagine salta giù e linee di nuovo.
C'è qualcosa che mi manca qui?
@Ricky - Hmm, il che significa che in questo caso non c'è soluzione, credo.Al suo meglio, ci sarà un jaggedy match dopo, ma come il mio contenuto si espande e si contrae etc.nascondere/mostrare non essere pratico.Ancora grazie per la risposta con la soluzione migliore.
Soluzione
Il suo un bug nel motore di rendering.Ho eseguito in tutto il tempo.Un potenziale modo per risolverlo è quello di mostrare e nascondere il div ogni volta che si modifica il contenuto (che a sua volta modifica l'altezza):
var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';
Speriamo che questo accade abbastanza veloce che non si vede :)
Altri suggerimenti
Un'altra soluzione che ha funzionato per me e non aveva alcun effetto di sfarfallio era di aggiungere e rimuovere un fittizio nome di classe CSS, usando jQuery:
$(element).toggleClass('damn-you-ie')
Se siete preoccupati per ottenere un tremolio di mostrare e nascondere divCol è possibile ajust un'altra proprietà css e avrà lo stesso effetto ad es.
var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';