css – 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>

当你在IE7中运行这个时，你会看到“footer”元素修改后的“面板”的CSS。在IE8，FF和Chrome中测试的同一个示例的行为与预期完全相同。

我已经尝试更新元素的类，但如果浏览器的窗口已打开最大化，没有进一步的大小更改窗口(这是约90％的用例我们的产品… 。:()
我坚持使用基于CSS的解决方案，但是我认为在这种情况下我可以做出一个异常，如果它可以轻松地做成IE7特定(这意味着其他浏览器将以标准的方式与此行为)。

请帮忙！

解决方法

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

问题会去，如果你添加overflow：hidden;到相对定位的#panel父级。

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

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

Note that position: relative does 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属性触发元素具有布局，参见第“Where Layout Comes From”章：

As of IE7,overflow became a layout-trigger.

css – IE7相对/绝对定位错误,动态修改页面内容

解决方法

相关文章