现在的位置: 首页 > 综合 > 正文

绝对定位的元素在IE6下莫名丢失解决办法

2012年03月27日 ⁄ 综合 ⁄ 共 1168字 ⁄ 字号 评论关闭

前几天做春运的页面时遇到的一个问题.

下面为形成此问题的代码:

<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等.

但个人觉得还是第二种方法最好.

抱歉!评论已关闭.