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

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

2 голосов
/ 29 августа 2008

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

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

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

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

Ответы [ 3 ]

3 голосов
/ 29 августа 2008

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

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

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

1 голос
/ 21 ноября 2010

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

$(element).toggleClass('damn-you-ie')
0 голосов
/ 15 января 2010

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

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