IE-CSS-Fehler – Wie behalte ich eine Position bei: absolut, 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 Stil habe ich ein Bild, das zwischen der Spalte und dem Inhalt aufgeteilt ist, aber die gleiche vertikale Positionierung beibehalten muss, damit es ausgerichtet ist.

Das Styling ähnelt diesem:

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

Das funktioniert hervorragend, wenn Inhalte vorhanden sind #content wird vor dem Rendern dynamisch geladen.Das funktioniert auch in Firefox immer hervorragend.Wenn ich jedoch in IE6 und IE7 Javascript verwende, um den Inhalt (und damit die Höhe) von zu ändern #content, die Bilder stimmen nicht mehr überein (#column bewegt sich nicht).Wenn ich die IE Developer Bar verwende, um nur das Div zu aktualisieren (z. B. Position: Absolute manuell hinzufügen), springt das Bild nach unten und richtet sich wieder aus.

Fehlt mir hier etwas?

@Ricky – Hmm, das bedeutet, dass es in diesem Fall meiner Meinung nach keine Lösung gibt.Im besten Fall wird es danach ein zackiges Matchup geben, aber wenn sich mein Inhalt erweitert und zusammenzieht usw.Das Verstecken/Anzeigen erweist sich als nicht praktikabel.Trotzdem vielen Dank für die Antwort mit der besten Lösung.

Answer 1

Es handelt sich um einen Fehler in der Rendering-Engine.Ich stoße ständig darauf.Eine mögliche Lösung besteht darin, das Div immer dann auszublenden und anzuzeigen, wenn Sie den Inhalt ändern (was wiederum die Höhe ändert):

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

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

Answer 2

Eine andere Problemumgehung, die bei mir funktionierte und keinen Flackereffekt hatte, bestand darin, einen Dummy-CSS-Klassennamen hinzuzufügen und zu entfernen, wie diesen mit jQuery:

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

Answer 3

Wenn Sie sich Sorgen machen, dass Sie durch das Ein- und Ausblenden von divCol ein Flackern bekommen, können Sie einfach eine andere CSS-Eigenschaft hinzufügen und es wird den gleichen Effekt haben zum Beispiel.

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