1

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

有什么想法/解决方法吗？

4

2 回答 2

0

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

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

或者，尝试overflow: hidden一下。

于 2010-05-03T20:59:39.837 回答
0

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

这是一种解决方法，但不适合我的情况。我在'test'上使用jquery的slideDown（）方法，所以我只能在动画完成后重新调整底部，而不是随着它的进展。不是很顺利。

还要别的吗？

于 2010-05-03T21:31:33.913 回答