IE CSS Bug - Wie kann ich eine position:absolute beibehalten, wenn sich dynamische Javascript-Inhalte auf der Seite ändern

Question

Ich habe eine Seite, auf der es eine Spalte und ein Inhalts-Div gibt, etwa so:

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

Mit etwas Styling habe ich ein Bild, das zwischen der Spalte und dem Inhalt aufgeteilt ist, aber die gleiche vertikale Positionierung beibehalten muss, so dass es aufgereiht ist.

Das Styling ist ähnlich wie hier:

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

Dies funktioniert hervorragend, wenn Inhalte in #content wird vor dem Rendering dynamisch geladen. Dies funktioniert auch in Firefox immer gut. Allerdings, in IE6 und IE7, wenn ich javascript verwenden, um den Inhalt (und damit die Höhe) von #content werden die Bilder nicht mehr ausgerichtet ( #column bewegt sich nicht). Wenn ich IE Developer Bar verwenden, um nur die div zu aktualisieren (sagen Sie Position:absolute manuell hinzufügen) das Bild springt nach unten und Zeilen wieder.

Gibt es etwas, das ich hier übersehe?

@Ricky - Hmm, das bedeutet, dass es in diesem Fall keine Lösung gibt, denke ich. Im besten Fall gibt es eine zackige Anpassung danach, aber wie mein Inhalt erweitert und Verträge usw. Ausblenden/Anzeigen funktioniert nicht zu praktisch sein. Trotzdem danke für die Antwort mit der besten Lösung.

Answer 1

Es ist ein Fehler in der Rendering-Engine. Ich stoße immer wieder darauf. Ein möglicher Weg, um es zu lösen ist zu verbergen und zeigen die div, wenn Sie den Inhalt ändern (das wiederum ändert die Höhe):

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

Hoffentlich geht das schnell genug, dass es nicht auffällt :)

Answer 2

Ein anderer Workaround, der bei mir funktionierte und kein Flackern zur Folge hatte, war das Hinzufügen und Entfernen eines Dummy-CSS-Klassennamens, wie hier mit jQuery:

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

Answer 3

Wenn Sie sich Sorgen machen, dass das Ein- und Ausblenden von divCol zu einem Flackern führt, können Sie eine andere CSS-Eigenschaft einstellen, die denselben Effekt hat z.B..

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