IE绝对定位元素神秘消失
In IE6 or IE7, when an absolutely positioned div locates beside a float div, it maybe disappeared.
2.Demo2:当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示。
3.Demo3:当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示。
4.Demo4:当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示。
5.Demo5,效果同Demo3,
Demo3中是两个浮动层宽度相加等于父层宽度,Demo5是一个浮动层宽度等于父层宽度。
============================================================================
在IE6或IE7,当一个绝对定位元素与浮动元素相邻时,绝对定位元素有可能消失。说有可能,是因为IE6和IE7的消失情况不太一样。
以下是DEMO,请用IE6,IE7,FF做对比浏览。
1.Demo1:当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致。
absolute
float
2.Demo2:当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示。
absolute
float
3.Demo3:当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示。
absolute
float
float
4.Demo4:当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示。
absolute
float
float
5.Demo5,效果同Demo3,
Demo3中是两个浮动层宽度相加等于父层宽度,Demo5是一个浮动层宽度等于父层宽度。
absolute
float
======================================================================
对比结果的确是很错综复杂,FF始终是正常浏览的。归根究底还是IE处理浮动和定位元素有问题,因此要解决这个BUG的方法也很简单,让绝对定位层不挨着浮动层放置就好了。
To fix this bug is just not setting the absolutely positioned div beside the float div.