我恨IE6

IE6 bug: 消失的绝对定位元素

以下转自http://www.ued163.com/?p=673

此BUG最初是在《前端观察》网站刊登，这里再描述一下，代码如下：
<mce:style><!-- *{ padding:0; margin:0;} .content{width:600px;} .abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; } .main{float:left; width:300px; height:200px; background:#f3f3f3; } .sub{float:left;width:300px; height:200px; background:#bc2931;} --></mce:style><style mce_bogus="1">*{ padding:0; margin:0;} .content{width:600px;} .abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; } .main{float:left; width:300px; height:200px; background:#f3f3f3; } .sub{float:left;width:300px; height:200px; background:#bc2931;}</style> <div class=”content”> <div class=”abs”> abs </div> <div class=”main”> main </div> <div class=”sub”> sub </div> </div>

以上代码在IE6下浏览会发现，绝对定位元素不见了。

产生原因不明，当满足以下条件之一可解决：

1、main + sub + 2 < content（各元素的宽度）；

2、在main元素之前加一个空的<div></div>，如…<div></div><div class=”main”>…；

3、给abs元素再嵌套一个div元素，如<div><div class=”abs”>abs</div></div>

 

补充第四种解决方案：

.sub{float:left;width:300px; height:200px; background:#bc2931;margin-right:-3px;}

怀疑是IE6的占位问题引起的 main + sub占满了content，导致abs无法显示 相关的是div的display:none也会遇到占位问题。