快速注册

IE6 Resize bug

王飞 2010-04-02 10:37:13

转载于： http://docs.google.com/View?id=dcx98grs_112f89x8pfz
IE6 Resize bug: 泛指当IE6窗口大小发生变化(resize)时，IE6中出现的bug, 例如: 内容显示不正常，有部分内容错位或者无法显示。
Case 1、在friendlybit中有一个篇文章（http://friendlybit.com/css/ie6-resize-bug/）讲述了这个bug，该bug对应的代码为:

   代码：
        body {
            margin: 0 auto;
            width: 760px; /* Any fixed or fluid width */
        }
        /* Affects all elements with position: relative; */
        #example p {
             position: relative;
        }
     现象：
     在body内的所有带有position:relative的元素（例如：#example p）都会受到影响， resize之后表现为一些元素为错位，例如： http://friendlybit.com/files/ie6resizebug/

    解决办法：
       为body添加position:relative样式
Case 2、在有道购物搜索首页，也曾出现过类似的问题：
    代码：
   <body> 没有特别的css
        <div id="w"> #w {margin-top:-118px; position:relative; z-index:2;}
           <div id="body"> #body {margin:0 auto; width:960px;}
                <div style="postion:absolute;" id="a1" >aaaa</div>
                <div style="postion:relative;" id="a2" > Images </div>
           </div>
        </div>
    </body>
    现象：
         1. 在IE6中size之后，部分图片或者文本不再出现, 如： div[@id="a2"]中的图片，除非刷新页面。
         2. div[@id=a1] 通过position:absolute; 和（left， top）方式定位, 实际显示的位置和期望的位置有一个偏差，这个偏差与浏览器的宽度有关系。
    解决办法:
         1. 为div[@id=body]添加position:relative;样式
         2. div[@id=a1]采用absolute方式定位，不过其(left,top)坐标是相对于div[@id=body]的左上角
    原因分析：
         1. ie6 resize bug导致， div[@id=body]在IE6中自动获得position:relative样式，导致绝对定位的元素定位出现偏差（本来可能是参考客户端左上角定位，现在变成参考div[@id=body]定位
         2. 同时， div[@id=body]内带有postion:relative;样式的元素的样式变成postion:fixed; 从而出现了不可预知的效果，例如：元素错位，或不显示。
         为此，我们主动将div[@id=body]的样式设置为postion:relative; 然后ie6就不会做多余的事情了

回应转发赞收藏

> 我来回应

王飞

今年至少要读20本技术书籍, 50本其他书籍。

IE6 Resize bug

热门话题 · · · · · · ( 去话题广场 )