我想知道是否有人知道如何解决 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 中运行此命令时，您将看到修改“panel”的 CSS 后“footer”元素仍然保留。在 IE8、FF 和 Chrome 中测试的同一示例的行为完全符合预期。
我已经尝试过更新元素的类，但是如果浏览器窗口已最大化打开并且没有对窗口进行进一步的大小更改（这大约是我们产品的 90% 的用例），则这不起作用... .:()
我坚持使用基于 CSS 的解决方案，但我认为在这种情况下我可以例外，如果它可以轻松地成为 IE7 特定的（这意味着其他浏览器将以标准方式运行）。
请帮忙！
这和IE的“hasLayout bug”有关。相对定位#panel父级没有布局，因此 IE 在调整大小/重新定位时会忘记重绘其子级。
如果您添加，问题就会消失overflow: hidden;相对定位#panel parent.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
关于这个 IE bug 的深入背景信息可以在优秀的参考文献中找到“关于布局” http://www.satzansatz.de/cssd/onhavinglayout.html然后针对您的特定问题，特别是该章“相对定位的元素” http://www.satzansatz.de/cssd/onhavinglayout.html#rp:
注意position: relative不会触发 hasLayout，这会导致一些渲染错误，大部分是内容消失或错位。页面重新加载、窗口大小调整和滚动、选择可能会遇到不一致的情况。利用这个属性，IE 会偏移元素，但似乎忘记向其布局子元素发送“重绘”（因为布局元素会在重绘事件的信号链中正确发送）。
The overflow属性触发元素进行布局，另请参阅章节《布局从何而来》 http://www.satzansatz.de/cssd/onhavinglayout.html#wherefrom:
从 IE7 开始，overflow成为布局触发器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
