IE7相对/绝对定位错误，dynamic修改页面内容
我想知道是否有人有一个想法如何解决在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中运行这个function时，你会发现在修改“面板”的CSS后，“footer”元素会保留下来。 在IE8，FF和Chrome中testing的相同示例的行为完全如预期。
我已经尝试更新元素的类，但是如果浏览器的窗口已经被最大化地打开并且没有进一步改变窗口的大小（这对于我们的产品来说大约有90％的用例是这样的…） 。:(）我坚持一个基于CSS的解决scheme，但是我认为我可以在这种情况下例外，如果它可以很容易地制定IE7的具体（这意味着其他浏览器将以一个标准的方式performance） 。
请帮忙！
这与IE的“hasLayout bug”有关。 相对定位的#panel父母没有布局，因此，当它被resize/重新定位时，IE忘记重新绘制它的孩子。
如果你添加overflow: hidden; ，问题将会overflow: hidden; 到相对定位的#panel父。
#panel { position: relative; overflow: hidden; border: solid 1px black; }
关于这个IE错误的深度背景信息可以在优秀的参考资料“On having layout”中find ，然后针对您的特定问题特别是“相对定位元素”一章：
请注意，
position: relative不会触发hasLayout，这会导致一些呈现错误，大部分消失或放错内容。 页面重新加载，窗口大小调整和滚动，select可能会遇到不一致。 有了这个属性，IE抵消了元素， 但似乎忘记发送一个“重绘”到其布局子元素 （因为布局元素将在重绘事件的信号链中正确发送）。
overflow属性触发元素进行布局，参见“布局来自哪里”一章：
从IE7开始，
overflow变成了一个布局触发器。
这个解决scheme并不一定与dynamic内容有关，但是对我来说（至less让页面成为可pipe理的程度）是很有用的： 指定维度 。 我只注意到IE7认为一个div没有宽度时，通过点击工具（ctrl + B）在IE工具中使用蹩脚的“select元素”。
我已经创build了我的函数来触发重绘。 也许这不是一个正确的解决scheme，但它的工作原理。
// Script to fix js positon bug on IE7 // Use that function, recomended delay: 700 function ie7fixElementDelayed(elements, delay) { window.setTimeout( function () { if(navigator.appVersion.indexOf("MSIE 7.") != -1) { ie7fixElement(elements); } }, delay ); } function ie7fixElement(elements) { elements.each(function(i) { var element = $(this); var orginalDisplayValue = element.css("display"); element.css("display", "none"); element.css("display", orginalDisplayValue); }); }
示例用法：
ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
