1.问题
今天在做页面的时候发现在IE6中绝对定位元素神秘消失了。下面是随手写的示例代码：
在IE6中的显示效果：<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="utf-8"/>
<script src="jquery-1.9.1.js"></script>
<style>
#one {
float:left;
width:400px;
height:300px;
padding-top:100px;
position:relative;
background:red;
}
#two {
float:left;
width:400px;
height:200px;
background:blue;
display:inline;
}
#three {
position:absolute;
width:50px;
height:50px;
background:green;
left:50px;
top:0;
}
</style>
</head>
<body>
<div id="one">
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
2.原因及解决方法
在蓝色理想中有大神给出了以下解释：
（1）当绝对定位层的邻近浮动层的宽度不等于父层宽度时，以及没有清除浮动时，IE6/7，FF中显示一致；
（2）当绝对定位层的邻近浮动层的宽度不等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示；
（3）当绝对定位层的邻近浮动层的宽度等于父层宽度时，以及没有清除浮动时，IE6不显示绝对定位层，IE7/FF显示；
（4）当绝对定位层的邻近浮动层的宽度等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示；
解决方法：
（1）在绝对定位元素与浮动元素中间插一个空的div，不加任何样式。
（2）在用一个div将绝对定位元素包起来，div不应用样式。
5291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
