css 样式“底部：0”在动态中
我在容器元素的底部有一个绝对定位的元素。问题是容器的内容是动态变化的（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>
有什么想法/解决方法吗？
I have an absolutely positioned element at the bottom of a container element. The problem is that the content of the container changes dynamically (javascript). In FF it still works fine, but IE7 (didn't test any others) seems to calculate the position of the element relative to the top of the container on page loading, and then doesn't update it.
examples:
<?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>
and the opposite:
<?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>
Any ideas/workarounds?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是一个已知的错误，我现在不记得细节也不记得它叫什么。
您可以尝试使用
zoom: 1给出容器布局吗？或者，尝试使用
overflow:hidden。This is a known bug, I just can't remember the details right now nor what it is called.
Can you try giving the container layout using
zoom: 1?Alternatively, try
overflow: hiddenon it.我刚刚发现这个：
IE CSS 错误 - 如何解决当页面上的动态 javascript 内容发生变化时，我保持一个position:absolute
这是一种解决方法，但不适合我的情况。我在“测试”上使用jquery的slideDown()方法，所以我只能在动画完成后重新调整底部部分，而不是在动画进行时重新调整。不是很顺利。
还要别的吗？
I just found this:
IE CSS Bug - How do I maintain a position:absolute when dynamic javascript content on the page changes
It is a workaround, but not ideal for my situation. I'm using jquery's slideDown() method on 'test', so I can only have the bottom piece readjust after the animation is complete, not as it progresses. Not very smooth.
Anything else?