CSS стиль "дно: 0" в динамическом <div> - PullRequest
Новая
       11

CSS стиль "дно: 0" в динамическом <div>

1 голос
/ 04 мая 2010

У меня есть абсолютно позиционированный элемент внизу элемента контейнера. Проблема в том, что содержимое контейнера меняется динамически (JavaScript). В FF он все еще работает нормально, но IE7 (не проверял другие), похоже, вычисляет положение элемента относительно вершины контейнера при загрузке страницы, а затем не обновляет его.

Примеры: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
</head>
<body>
    <div style="position:relative;"
onmouseover="document.getElementById('test').style.display='block'"
onmouseout="document.getElementById('test').style.display='none'">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        <div id="test" style="display:none;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
        <div style="position:absolute;bottom:0;background-color:blue;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
    </div>
</body>
</html>

и наоборот: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
</head>
<body>
    <div style="position:relative;"
onmouseover="document.getElementById('test').style.display='none'"
onmouseout="document.getElementById('test').style.display='block'">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        <div id="test" style="display:block;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
        <div style="position:absolute;bottom:0;background-color:blue;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
    </div>
</body>
</html>

Есть идеи / обходные пути?

Ответы [ 2 ]

0 голосов
/ 04 мая 2010

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

Это обходной путь, но не идеальный для моей ситуации. Я использую метод jQuery slideDown () для 'test', поэтому я могу перенастроить только нижнюю часть после завершения анимации, а не по мере ее продвижения. Не очень гладко.

Что-нибудь еще?

0 голосов
/ 04 мая 2010

Это известная ошибка, я просто сейчас не могу вспомнить ни детали, ни то, что она называется.

Можете ли вы указать макет контейнера, используя zoom: 1?

Или попробуйте overflow: hidden.

...