IE CSS Bug - Come faccio a mantenere una posizione di assoluto quando dynamic javascript contenuto della pagina cambia

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

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.

È stato utile?

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 = '';
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top