IE7相对/绝对定位错误，动态修改页面内容 [英] IE7 relative/absolute positioning bug with dynamically modified page content
问题描述
我想知道是否有任何人有想法如何解决在IE7中的以下问题：
I was wondering if there's anyone having an idea how to tackle with the following problem in 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中运行时，您会看到footer元素在修改CSS为面板。在IE8，FF和Chrome中测试的同一个示例与预期的完全一样。
When you run this in IE7 you'll see that the "footer" element stays after modifying the CSS for "panel". The same example tested in IE8, FF and Chrome behaves exactly as expected.
我已经尝试更新元素的类，但是如果浏览器的窗口打开最大化，没有进一步的大小更改窗口（这是约90％的用例，我们为我们的产品.... :(）
我坚持使用基于CSS的解决方案，但我认为我可以在这种情况下做一个例外，如果它可以很容易地做成IE7特定（这意味着其他浏览器将以标准的方式与此行为）。
I've already tried updating the element's class but this does not work if the browser's window has been opened maximized and no further size changes were made to the window (which is about 90% of the use cases we have for our product.... :( ) I'm stuck with a CSS-based solution however I think that I can make an exception in this case if it can easily be made IE7-specific (which means that other browsers will behave in a standard way with this).
请帮助！
推荐答案
这与IE的hasLayout错误相关，相对定位面板父项没有布局，因此IE在重新调整大小/重新定位时会忘记重绘其子项。
This is related to the "hasLayout bug" of IE. The relatively positioned #panel parent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.
将 overflow：hidden; 添加到相对定位的 #panel 父级。
The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
有关此IE错误的深入背景信息可以在优秀的参考文献中找到有布局，然后针对您的特定问题，特别是相对定位的元素：
In depth background information about this IE bug can be found in the excellent reference "On having layout" and then for your particular problem specifically the chapter "Relatively positioned elements":
请注意，
position：relative不会触发hasLayout，这会导致一些渲染错误，主要是消失或放错位置的内容。页面重新加载，窗口大小调整和滚动，选择可能会遇到不一致。使用此属性，IE会抵消元素，但似乎忘记向其布局子元素发送重绘（因为布局元素在重绘事件的信号链中会正确发送）。
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 属性触发元素具有布局， a href =http://www.satzansatz.de/cssd/onhavinglayout.html#wherefrom =nofollow noreferrer>布局来自何处：
The overflow property triggers the element to have layout, see also the chapter "Where Layout Comes From":
自IE7起，
overflow成为布局触发器。
这篇关于IE7相对/绝对定位错误，动态修改页面内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
