动态修改页面内容的 IE7 相对/绝对定位错误答案

【问题标题】：IE7 relative/absolute positioning bug with dynamically modified page content动态修改页面内容的 IE7 相对/绝对定位错误
【发布时间】：2011-01-29 05:06:20
【问题描述】：

我想知道是否有人知道如何在 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 后“页脚”元素仍然存在。在 IE8、FF 和 Chrome 中测试的相同示例的行为完全符合预期。

我已经尝试更新元素的类，但是如果浏览器的窗口已最大化打开并且没有对窗口进行进一步的大小更改（这大约是我们产品用例的 90%），这将不起作用.... :( ) 我坚持使用基于 CSS 的解决方案，但是我认为如果可以轻松地将其设置为特定于 IE7 的情况（这意味着其他浏览器将以标准方式运行），我可以在这种情况下破例。

请帮忙！

【问题讨论】：

您是否尝试过将文档类型切换为 html-strict 或 xhtml-strict？然后会发生什么？
确实没有。问题是我无法控制发送给客户的文档类型（由于我无法在此讨论的原因），所以即使它有效，它也不是解决方案......
2 年后，这个问题（和答案）仍然非常有用！有一段时间我一直在为此头疼。甚至无法弄清楚如何正确地表达这个问题......谢谢！

标签： css css-position internet-explorer-7

【解决方案1】：

这与IE的“hasLayout bug”有关。相对定位的 #panel 父级没有布局，因此 IE 在调整大小/重新定位时忘记重绘其子级。

如果您将overflow: hidden; 添加到相对定位的#panel 父级，问题就会解决。

#panel { position: relative; overflow: hidden; border: solid 1px black; }

关于这个 IE 错误的深入背景信息可以在优秀的参考资料"On having layout" 中找到，然后针对您的特定问题特别是章节"Relatively positioned elements"：

注意position: relative不会触发hasLayout，这会导致一些渲染错误，大多是内容消失或错位。页面重新加载、窗口大小调整和滚动、选择可能会遇到不一致。使用此属性，IE 会偏移元素，但似乎忘记向其布局子元素发送“重绘”（因为布局元素会在重绘事件的信号链中正确发送）。

overflow 属性触发元素具有布局，另见章节"Where Layout Comes From"：

从 IE7 开始，overflow 成为布局触发器。

【讨论】：

无法在 IE7 中的 IETester 中确认：整个事情都消失了。你确定是这个吗？
那是 A M A Z I N G !!!谢谢！！！我已经为此苦苦挣扎了 2 天，但没有找到答案。非常感谢！
哦，好吧，似乎成功了 - 也许我得到了错误的结果。
@Pekka，这就是为什么我仍然不信任 IETester。
我发现添加zoom: 1; 会更好，因为它不会以其他方式影响您的布局，例如overflow: hidden; 可以。两者都触发hasLayout。

【解决方案2】：

这个解决方案不一定与动态内容有任何关系，但它对我有用（至少使页面变得可管理程度）：指定尺寸。我只注意到 IE7 在 IE 工具中使用糟糕的“通过单击选择元素”工具 (ctrl+B) 时认为 div 没有宽度。

【讨论】：

我很高兴它奏效了，但您的回答更适合作为评论而不是答案。

【解决方案3】：

我已经创建了触发重绘的函数。也许这不是一个正确的解决方案，但它确实有效。

// 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);

【讨论】：