絕對位置的元素在IE6下莫名丟失解決辦法

前幾天做春運的頁面時遇到的一個問題.

下面為形成此問題的代碼:

<style>
.wrap{position:relative;width:400px;height:300px;border:1px solid #000;}
.box{background:red;width:100px;height:200px;position:absolute;left:50px;top:100px;}
.test1{background:green;width:200px;height:100px;float:left;}
.test2{background:blue;width:200px;height:100px;float:left;}
</style>
<div class="wrap">
<div class="box">123456789</div>
<div class="test1">abc</div>
<div class="test2">def</div>
</div>

此時.class名為"box"的元素在IE6下完全不見了.

 

經過測試.發現這個問題的形成條件:

1.box為絕對位置的元素.

2.box的相鄰元素都為浮動元素.

3.相鄰浮動元素的寬之和>=其父級元素的寬.

 

解決辦法:

1.設定其相鄰浮動元素的margin;

.test1{background:green;width:200px;height:100px;float:left;margin-right:-3px;}

2.在box外層加一層position:relative的包裹.

<style>
.wrap{position:relative;width:400px;height:300px;border:1px solid #000;}
.add-wrap{position:relative;}
.box{background:red;width:100px;height:200px;position:absolute;left:50px;top:100px;}
.test1{background:green;width:200px;height:100px;float:left;}
.test2{background:blue;width:200px;height:100px;float:left;}
</style>
<div class="wrap">
<div class="add-wrap">
<div class="box">123456789</div>
</div>
<div class="test1">abc</div>
<div class="test2">def</div>
</div>

在網上看到別人還有很多其他的解決這個問題的辦法.

例如插入空白DIV等.

但個人覺得還是第二種方法最好.