Jensen Wu UED

wuchengzhi

IE6下position:absolute的定位BUG(转载)
IE6下position:absolute的定位BUG(转载)
2011年02月23日 星期三 下午 4:20

  position:absolute定位在IE6下存在left和bottom的定位错误问题:
 
 <!--IE6下的left定位错误-->
<div style="position:relative;border:1px solid orange;text-align:center;">
 <a href="http://hi.baidu.com/cjky/"   title="小老头的blog">小老头</a>
 <div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
<!--IE6下的left定位错误-->
<hr />
<div style="position:relative;border:1px solid orange;text-align:right;">
 <a href="http://hi./baidu.com/cjky/" title="小老头的blog">小老头</a>
 <div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>

 上面这段代码在IE6中定位错误。解决办法有两种:1、给父层设置zoom:1触发layout。 2、给父层设置宽度(width)。
 
 <!--解决方法1 zoom:1-->
<hr />
<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">
 <a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
 <div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
<!--解决方法2 设置width-->
<hr />
<div style="position:relative;width:99%;border:1px solid orange;text-align:center;">
 <a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
 <div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>

 下面的这段代码在IE6下,bottom定位错误:
 
 <!--IE6下的bottom定位错误-->
<hr />
<div style="position:relative;border:1px solid orange;text-align:center;">
 a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
 <div style="position:absolute;bottom:0;left:0;background:#CCC;">cjky</div>
</div>

 解决办法和left定位类似:方法1是给父层设置zoom触发layout,方法2是给父层设置高度(height)。
 
 <!--解决方法1 zoom:1-->
<hr />
<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">
 <a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
 <br />
 <a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
 <div style="position:absolute;bottom:0;left:0;background:#CCC;">cjky</div>
</div>
<!--解决方法2 设置height-->
 <hr />
<div style="position:relative;height:60px;border:1px solid orange;text-align:center;">
 <a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
 <div style="position:absolute;bottom:0;left:0;background:#CCC;">cjky</div>
</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外的任何值

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

IE6下position:absolute的定位BUG(转载)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭