absolute在ie,ff下的一些区别

absolute在ie,ff下的一些区别
作者：Neoxone 发表时间： 2009年02月3号，星期二阅读：7,662 次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>absolute未设置top/left时在ie,ff下的一点区别</title>
<style type="text/css">
	.outer{background:#ccc;width:300px;height:300px;position:relative;}
	.inner{background:#eee;position:absolute;}
</style>
</head>
<body>
<div class="outer">
	    <div>inline元素</span>
		<div class="inner">绝对定位元素</div>
</div>
</body>
</html>

在ie(6/7)下，未设置top/left的absolute元素的效果比较怪异。（“inline元素”所在的节点是一个inline元素的节点，直接是textNode节点效果也一样）

上面的差别只是个小差别。而下面的问题就有些教育意义了：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ie6,7的绝对定位层的100%尺寸的bug</title>
<style>
*{padding:0px;margin:0px;}
.outer {
	position:relative;
	border:10px solid #000;
	width:150px;
	height:150px;
	padding:10px; /* 差别的关键在这 */
}
.inner {
	position:absolute;
	border:10px solid #f00;
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<div class="outer">
	<div class="inner"></div>
</div>
</body>
</html>

ie6和ie7都有问题，而且还不一样。
width:100%正确的解释，应该是相对于父级的(width+padding)才对。
但ie7未将padding（Y）算入，而ie6则未将padding(X)算入。
这个问题讨论在这里：关于绝对定位元素的宽度100%怎么解释

由此，我们应该注意。当绝对定位层需要设置100%时，其relative父级应弃用padding。

另外，在那个讨论帖里，还提到了另一个问题，但其实是误读的，当时也没仔细考虑。大家也不妨一看：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>中间夹一层，小心haslayout</title>
<style>
*{padding:0;margin:0;}
.outer {
	position:relative;
	border:10px solid #00f;
	width:150px;
	height:150px;
	padding:10px; /* 关键仍在于此 */
}
.inter {
	background:#ccc;
	/* zoom:1;  此处如果触发haslayout，问题就复杂了 */
}
.inner {
	position:absolute;
	border:10px solid #f00;
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<div class="outer">
	<div class="inter">
		<div class="inner"> </div>
	</div>
</div>
</body>
</html>

标签： absolute, 兼容