IE6相对父容器绝对定位的bug及其解决办法

一般相对父容器绝对定位是这样的,子容器绝对定位,父容器设置成相对定位,就可以实现

 

<div style=”position:relative;border:1px solid orange;text-align:right;”>
     <a href="#”>xxxxxxx</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>yyyyy</div>
</div>

解决办法有两种:
  1、给父层设置zoom:1触发layout。 
  2、给父层设置宽度(width(定位left)/height(定位bottom))。

 

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外的任何值

发布了146 篇原创文章 · 获赞 31 · 访问量 138万+
展开阅读全文

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

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览