我想知道是否有人知道如何在 IE7 中解决以下问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
当您在 IE7 中运行它时,您会看到在修改“面板”的 CSS 后“页脚”元素仍然存在。在 IE8、FF 和 Chrome 中测试的相同示例的行为完全符合预期。
我已经尝试过更新元素的类,但是如果浏览器的窗口已最大化打开并且没有对窗口进行进一步的大小更改(这大约是我们产品用例的 90%... . :( ) 我坚持使用基于 CSS 的解决方案,但是我认为在这种情况下我可以例外,如果它可以很容易地成为 IE7 特定的(这意味着其他浏览器将以标准方式运行) .
请帮忙!