IE6 bug: 消失的绝对定位元素
最近在做群友发的一道css考题时遇见ie6下绝对定位元素消失的情况,rss订阅中看到这篇文章所以转载来分享,希望能有更完美的解决办法
转载于—UED163
此BUG最初是在《前端观察》网站刊登,这里再描述一下,代码如下:
<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;}
</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
3、给abs元素再嵌套一个div元素