Question

我在容器元素的底部有一个绝对定位的元素。问题是容器的内容动态变化（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>

任何想法/解决方法？

Answer 1

这是一个已知的错误，我现在不记得细节，也不记得它是什么。

您可以尝试使用zoom: 1提供容器布局吗？

或者，请尝试使用overflow: hidden。

Answer 2

我刚刚发现了这个： IE CSS Bug - How do I maintain a position:absolute when dynamic javascript content on the page changes

这是一种解决方法，但对我的情况并不理想。我正在'test'上使用jquery的slideDown（）方法，因此我只能在动画完成后重新调整底部部分，而不是进展。不太顺利。

还有别的吗？

动态<div> </div>中的CSS样式“bottom：0”

2 个答案: