CSS 动态修改页面内容的 IE7 相对/绝对定位错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2473171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE7 relative/absolute positioning bug with dynamically modified page content
提问by Matthias Hryniszak
I was wondering if there's anyone having an idea how to tackle with the following problem in IE7:
我想知道是否有人知道如何在 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>
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.
当您在 IE7 中运行它时，您会看到在修改“面板”的 CSS 后“页脚”元素仍然存在。在 IE8、FF 和 Chrome 中测试的相同示例的行为完全符合预期。
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).
我已经尝试更新元素的类，但是如果浏览器的窗口已最大化打开并且没有对窗口进行进一步的大小更改（这大约是我们产品用例的 90%），则这不起作用。 . :( ) 我坚持使用基于 CSS 的解决方案，但是我认为在这种情况下我可以例外，如果它可以轻松地成为 IE7 特定的（这意味着其他浏览器将以标准方式运行） .
Please help!
请帮忙！
回答by BalusC
This is related to the "hasLayout bug" of IE. The relatively positioned #panelparent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.
这与IE的“hasLayout bug”有关。相对定位的#panel父级没有布局，因此 IE 在调整大小/重新定位时忘记重绘其子级。
The problem will go if you add overflow: hidden;to the relatively positioned #panelparent.
如果您添加overflow: hidden;到相对定位的#panel父级，问题就会出现。
#panel { position: relative; overflow: hidden; border: solid 1px black; }
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":
关于这个 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).
注意
position: relative不会触发hasLayout，这会导致一些渲染错误，主要是内容消失或错位。页面重新加载、窗口大小调整和滚动、选择可能会遇到不一致。有了这个属性，IE 会偏移元素，但似乎忘记向其布局子元素发送“重绘”（因为布局元素会在重绘事件的信号链中正确发送）。
The overflowproperty triggers the element to have layout, see also the chapter "Where Layout Comes From":
该overflow属性触发元素具有布局，另见“布局来自何处”一章：
As of IE7,
overflowbecame a layout-trigger.
从 IE7 开始，
overflow成为布局触发器。
回答by Sebastian Thomas
This solution doesn't necessarily have anything to do with dynamic content, but it worked for me (at least made the page borked to a manageable degree): specify dimensions. I only noticed IE7 thought a div didn't have a width when using the crappy 'Select element by click' tool (ctrl+B) in IE tools.
这个解决方案不一定与动态内容有任何关系，但它对我有用（至少使页面变得可管理）：指定维度。我只注意到 IE7 认为 div 在 IE 工具中使用蹩脚的“通过单击选择元素”工具（ctrl+B）时没有宽度。
回答by MaciejLisCK
I have created my function to trigger redraw. Maybe it is not a right solution, but it works.
我已经创建了我的函数来触发重绘。也许这不是一个正确的解决方案，但它有效。
// 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);
});
}
Sample usage:
示例用法：
ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
