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

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

Вопрос

У меня есть страница с колонкой и содержимым, примерно так:

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

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

Стиль похож на это:

#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 (скажем, добавить позицию: абсолютный вручную), изображение переместится вниз и выстроится снова.

Есть ли что-то, чего мне здесь не хватает?

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

Это было полезно?

Решение

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

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

Надеюсь, это произойдет достаточно быстро, чтобы этого не было заметно :)

Другие советы

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

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

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

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top