<!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中运行这个时，你会看到“footer”元素修改后的“面板”的CSS。在IE8，FF和Chrome中测试的同一个示例的行为与预期完全相同。
我已经尝试更新元素的类，但如果浏览器的窗口已打开最大化，没有进一步的大小更改窗口(这是约90％的用例我们的产品… 。:()
我坚持使用基于CSS的解决方案，但是我认为在这种情况下我可以做出一个异常，如果它可以轻松地做成IE7特定(这意味着其他浏览器将以标准的方式与此行为)。
请帮忙！
解决方法
问题会去，如果你添加overflow：hidden;到相对定位的#panel父级。
#panel { position: relative; overflow: hidden; border: solid 1px black; }
在深入背景信息关于此IE错误可以找到在优秀的参考“On having layout”然后针对您的特定问题特别是章节“Relatively positioned elements”：
Note that
position: relativedoes not trigger hasLayout,which leads to some rendering errors,mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload,window sizing and scrolling,selecting. With this property,IE offsets the element,but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).
overflow属性触发元素具有布局，参见第“Where Layout Comes From”章：
As of IE7,
overflowbecame a layout-trigger.
