IE CSS Bug - Comment puis-je conserver une position: absolute lorsque le contenu javascript dynamique sur la page change

Question

J'ai une page où il y a une colonne et un div de contenu, un peu comme ceci:

<div id="container"> 
    <div id="content">blahblahblah</div> 
    <div id="column"> </div> 
</div> 

Avec un peu style J'ai une image qui est divisée entre la colonne et le contenu, mais qui doit conserver le même positionnement vertical pour qu'elle s'aligne.

Styling est similaire à ceci:

#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; 
} 

Cela fonctionne très bien lorsque le contenu en #content est chargé dynamiquement avant de rendre. Cela fonctionne également très bien dans Firefox. Cependant, dans IE6 et IE7 si j'utilise javascript pour changer le contenu (et donc la hauteur) de #content, les images ne sont plus alignées (#column ne bouge pas). Si j'utilise IE Developer Bar pour simplement mettre à jour le div (disons ajouter la position: absolue manuellement), l'image saute et s'aligne à nouveau.

Y a-t-il quelque chose qui me manque ici?

@Ricky - Hmm, cela signifie que dans ce cas, il n'y a pas de solution, je pense. À son meilleur, il y aura un match jaggedy après, mais comme mon contenu se développe et se contracte, etc. cacher/montrer ne fonctionne pas pour être pratique. Encore merci d'avoir répondu avec la meilleure solution.

Answer 1

C'est un bug dans le moteur de rendu. Je cours dedans tout le temps. Un moyen potentiel de résoudre est de cacher et de montrer la div à chaque fois que vous modifiez le contenu (qui, à son tour modifie la hauteur):

var divCol = document.getElementById('column'); 
divCol.style.display = 'none'; 
divCol.style.display = 'block'; 

Espérons que cela arrive assez vite qu'il ne soit pas visible :)

Answer 2

Si vous craignez d'obtenir un scintillement en affichant et en masquant divCol, vous pouvez ajuster une autre propriété css et cela aura le même effet

var divCol = document.getElementById('column'); 
divCol.style.zoom = '1'; 
divCol.style.zoom = ''; 

Answer 3

Une autre solution qui a fonctionné pour moi et n'a eu aucun effet vacillante était d'ajouter et de supprimer un nom de classe CSS factice, comme celui-ci en utilisant jQuery:

$(element).toggleClass('damn-you-ie')