IE6下position:absolute定位错误的bug和解决方法

web前端 2543 0 8年前

IE6下使用position:absolute定位存在left和bottom的定位错误问题,以下是几种常见的解决方法:

  1. <!--IE6下的left定位错误-->
  2. <div style="position:relative;border:1px solid orange;text-align:center;">
  3.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  4. <div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>
  5. </div>
  6. <!--IE6下的left定位错误-->
  7. <hr />
  8. <div style="position:relative;border:1px solid orange;text-align:right;">
  9.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  10. <div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>
  11. </div>

上面这段代码在IE6中定位错误。解决办法有两种:1、给父层设置zoom:1触发layout。 2、给父层设置宽度(width)。

  1. <!--解决方法1 zoom:1-->
  2. <hr />
  3. <div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">
  4.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  5. <div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>
  6. </div>
  7. <!--解决方法2 设置width-->
  8. <hr />
  9. <div style="position:relative;width:99%;border:1px solid orange;text-align:center;">
  10.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  11. <div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>
  12. </div>

下面的这段代码在IE6下,bottom定位错误:

  1. <!--IE6下的bottom定位错误-->
  2. <hr />
  3. <div style="position:relative;border:1px solid orange;text-align:center;">
  4.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  5. <div style="position:absolute;bottom:0;left:0;background:#CCC;">dovapour</div>
  6. </div>

解决办法和left定位类似:方法1是给父层设置zoom触发layout,方法2是给父层设置高度(height)。

  1. <!--解决方法1 zoom:1-->
  2. <hr />
  3. <div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">
  4.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a><br />
  5. <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  6. <div style="position:absolute;bottom:0;left:0;background:#CCC;">dovapour</div>
  7. </div>
  8. <!--解决方法2 设置height-->
  9. <hr />
  10. <div style="position:relative;height:60px;border:1px solid orange;text-align:center;">
  11.     <a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>
  12. <div style="position:absolute;bottom:0;left:0;background:#CCC;">dovapour</div>
  13. </div>

IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout:

        position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题

    float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现

    display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果----让某个元素有layout

    width: 除auto外的任何值

    height: 除auto外的任何值

    zoom: 除auto外的任何值