您现在的位置:主页 > CSS实例 > 文章内容

IE6绝对定位的bug及其解决办法

作者:admin     来源:未知     日期:2012-01-02    点击:0
  IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:

div css xhtml xml Example Source Code Example Source Code [www.]<!–IE6下的left定位错误–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
<!–IE6下的left定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:right;”>
     <a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
  上面这段代码在IE6中定位错误。
  解决办法有两种:
  1、给父层设置zoom:1触发layout。 
  2、给父层设置宽度(width)。

div css xhtml xml Example Source Code Example Source Code [www.]<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
<!–解决方法2 设置width–>
<hr />
<div style=”position:relative;width:99%;border:1px solid orange;text-align:center;”>
     <a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
  下面的这段代码在IE6下,bottom定位错误:

div css xhtml xml Example Source Code Example Source Code [www.]<!–IE6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=”http://www.”>http://www./</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>52CSS</div>
</div>
  解决办法和left定位类似:
  方法1是给父层设置zoom触发layout。
  方法2是给父层设置高度(height)。

div css xhtml xml Example Source Code Example Source Code [www.]<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=”http://www.”>http://www./</a><br />
   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:(评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。)

精彩广告

    精彩推荐


      Copyright © 2011-2013 CSS教程网 版权所有