IE CSS Bug - Как сохранить позицию: абсолютный при динамическом JavaScript содержания на странице изменений

Question

У меня есть страница, где есть столбец и ДИВО содержание, примерно так:

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

С некоторыми styling У меня есть изображение, которое разделяется между столбцом и контентом, но ему необходимо поддерживать такое же вертикальное позиционирование, чтобы оно выравнивалось.

Styling похож на это:

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

Это прекрасно работает, когда содержание в #content динамически загружается до рендеринга. Это также отлично работает в Firefox. Однако в IE6 и IE7, если я использую javascript для изменения содержимого (и, следовательно, высоты) #content, изображения больше не выстраиваются в линию (#column не перемещается). Если я использую IE Developer Bar, чтобы просто обновить div (например, добавить позицию: абсолютное вручную), изображение скачет вниз и снова выровняется.

Что-то я здесь не хватает?

@ Ricky - Хм, это значит, что в этом случае нет решения, я думаю. В лучшем случае после этого будет неоднозначный матч, но по мере расширения моего контента и контрактов и т. Д. Скрытие/показ не получится практичным. Все еще спасибо за ответ с лучшим решением.

Answer 1

Его ошибка в двигателе рендеринга. Я сталкиваюсь с этим все время. Одним из возможных способов ее решения, чтобы скрыть и показать DIV всякий раз, когда вы меняете содержание (что в свою очередь изменяет высоту):

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

Надеемся, что это происходит достаточно быстро, что это не заметно :)

Answer 2

Если вы беспокоитесь о том, чтобы получить мерцание от показа и скрытия divCol, вы можете использовать другое свойство css, и оно будет иметь тот же эффект eg

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

Answer 3

Другого обходной путь, который работал для меня, и был не мерцающий эффект не был добавлять и удалять фиктивное имя класса CSS, как это с помощью JQuery:

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