IE6 bug: 消失的绝对定位元素-优快云博客

本文描述了一个在IE6浏览器中出现的绝对定位元素丢失的问题，并提供了多种解决方案，包括调整元素宽度、添加空div等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

此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></div>，如…<div></div><div class=”main”>…；
3、给abs元素再嵌套一个div元素，如<div><div class=”abs”>abs</div></div>

4.添加样式：.sub{float:left;width:300px; height:200px; background:#bc2931; margin-right:-3px;}

5.添加样式：.content{width:600px; display:inline}可能是IE的渲染问题。

转载于:https://my.oschina.net/dlxc520/blog/12335