ie6使用绝对定位position:absolute,box不显示

ie6使用绝对定位position:absolute,box不显示

 

今天在重构一个页面的时候,为了考虑根据内容重要程度出现的优先性,所以在css的时候为几个box书写了绝对定位,在测试的时候发现,在FF,ie8,ie7,op下都可以正常显示,可是到了IE6的时候,这几块内容是空白的了…啊!怎么回事呢?
经过几番折腾,总出找出毛病了,原来是因为使用绝对定位的box紧挨着的是box使用了浮动:float。哎!没办法,我的解决方法是在他们之间又单独写了一个box,这个box加了一个样式,用来清除浮动的样式。保存,刷新页面,哈哈,好了!

通过后来了解后,这种情况有可能在IE7下也会出现,是因为紧挨着的float没有清除浮动,还是怎么的。
所以大家如果以后在使用绝对定位的时候,一定要小心哟。

另外试试直接在这个BOX加上属性clear:both也有用

 

 

IE6,浮动遇到绝对定位

 

本来两个不相同的东西,在IE6下硬是会擦出火花....

当一个元素内有一个块级元素并占据整行的时候,让它浮动,然后在它后面的行内元进行绝对定位(父级元素进行相对定位),在其他浏览器下都能正常显示,在IE6下会莫名其妙的消失。

<div><ul><ul><a></a></div>

尝试改变ul的长度,或者取消浮动都可以让IE6正常显示,莫非IE6下,绝对定位元素被覆盖掉了?但是在取消浮动下可以正常显示,那么在浮动下才会被覆盖?应该是ie6的bug.

再尝试下有没其他解决办法,在<a></a>外面套个行内元素,结果发现还是不行,试了下讨个块级元素,^.^哈哈,可以了,难道块级元素进行绝对定位就可以不平浮动了?尝试直接用块级元素或者把行内元素的display改为block,然后进行绝对定位,结果发现还是不行.................- -#。

得出的结论:IE6下,绝对定位元素与浮动元素有重叠会导致绝对定位元素消失。

解决办法:

1不相重叠。 
2 改变其中一种效果。
3在绝对定位元素外面套个块级元素,让他们直接接触。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值