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

一尘不染

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

css

我想知道是否有人想知道如何解决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的方式，则可以在这种情况下例外（这意味着其他浏览器将以此为标准方式）
。

请帮忙！

阅读 227

2020-05-16

共1个答案

一尘不染

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

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

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

有关此IE错误的深入背景信息，可以在出色的参考资料“关于布局”中找到，然后针对您的特定问题，特别是在“相对位置元素”一章中：

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

该overflow属性触发元素进行布局，另请参阅“布局来自何处”一章：

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

2020-05-16