IE7-position:relative层在动态渲染时的偏移问题

最新推荐文章于 2020-11-27 08:09:36 发布

青青木屋

最新推荐文章于 2020-11-27 08:09:36 发布

阅读量8.1k

点赞数 1

分类专栏： web前端 CSS

本文链接：https://blog.csdn.net/greenqingqingws/article/details/18962259

版权

web前端同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

一、问题重现

为了说清楚这个问题，借用一下【资料1】的例子。

<!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 οnclick="toggle();">Click me</button>
      <br /><br /><br />
      <div id="spacer"></div>
      <div id="footer">This is some footer</div>
    </div>
  </body>
</html>

在IE7中，点击"Click me"，“This is some footer”没有随着边框向上走。在IE8/9/10/11，firefox里面都是正常。

二、原因分析

1 #panel没有布局，因此当#panel重新布局的时候，IE7没有重画#panel的孩子。
2 position:relative没有触发IE的hasLayout属性。只有当元素的hasLayout属性被设为了true，才能对自己和子孙元素进行尺寸计算和定位。

3 overflow:hidden和float:left都能触发hasLayout属性。

至于为什么一定要触发hasLayout属性，才会对元素和元素的子孙进行重新定位，请参照【资料2】。

三、解决方法

#panel的属性中添加 overflow:hidden，或者添加float:left;width:100%; 。这两种方法都是可以修复这个bug的。

四、参考资料

资料1：http://stackoverflow.com/questions/2473171/ie7-relative-absolute-positioning-bug-with-dynamically-modified-page-content

资料2：http://www.qianduan.net/comprehensive-haslayout.html