Mat*_*zak 30 css css-position internet-explorer-7
我想知道是否有人知道如何解决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后"footer"元素仍然存在.在IE8,FF和Chrome中测试的相同示例表现完全符合预期.
我已经尝试更新元素的类但如果浏览器的窗口已经打开最大化并且没有对窗口进行进一步的大小更改(这是我们产品的大约90%的用例),这不起作用...... .:()我坚持使用基于CSS的解决方案但是我认为如果可以轻松地使IE7特定(这意味着其他浏览器将以标准方式运行),我可以在这种情况下例外. .
请帮忙!
Bal*_*usC 68
这与IE的"hasLayout bug"有关.相对定位的#panel父级没有布局,因此IE在重新调整大小/重新定位时会忘记重绘其子级.
如果添加overflow: hidden;到相对定位的#panel父级,问题就会出现.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
深入了解有关此IE错误的背景信息可以在优秀的参考文献"On having layout"中找到,然后针对您的特定问题,特别是"相对定位元素"这一章:
请注意,
position: relative不会触发hasLayout,这会导致一些渲染错误,主要是消失或放错位置的内容.页面重新加载,窗口大小调整和滚动,选择可能会遇到不一致.使用此属性,IE会偏移元素,但似乎忘记向其布局子元素发送"重绘"(因为布局元素将在重绘事件的信号链中正确发送).
该overflow属性触发元素具有布局,另请参阅"布局来自哪里"一章:
从IE7开始,
overflow成为布局触发器.
| 归档时间： |
|
| 查看次数： |
61272 次 |
| 最近记录： |