<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>测试模型</title>
<link href="css/test.css" type="text/css" rel="stylesheet" />
<style>
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body style="width:900px;margin:0 auto 800px auto;">
<p>IE6下的left定位错误</p>
<div style="position:relative; border:1px solid orange; text-align:center;">
<span>父级div，文本居中</span>
<div style="position:absolute;top:0;left:0;background:#CCC;">文本居中的子元素div，绝对定位top:0;left:0;</div>
</div>
<hr />
<div style="position:relative; border:1px solid orange; text-align:right;">
<span>父级div，文本居右</span>
<div style="position:absolute;top:0;left:0;background:#CCC;">文本居右的子元素div，绝对定位top:0;left:0;</div>
</div>
<hr/>
<p>IE6下的left定位错误的解决方法1：父级元素添加zoom:1;</p>
<div style="position:relative; border:1px solid orange; text-align:center;zoom:1;">
<span>父级div，文本居中，加了zoom:1;</span>
<div style="position:absolute;top:0;left:0;background:#CCC;">文本居中的子元素div，绝对定位top:0;left:0;</div>
</div>
<hr/>
<p>IE6下的left定位错误的解决方法2：父级元素添加width;</p>
<div style="position:relative;border:1px solid orange;text-align:right;width:99%;">
<span>父级div，文本居右，加了width:99%;</span>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">文本居右的子元素div，绝对定位top:0;left:0;</div>
</div>
<hr/>
<p>IE6下的bottom定位错误</p>
<div style="position:relative;border:1px solid orange;text-align:center;">
<span>父级div，文本居中</span>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">bottom定位错位了。文本居中的子元素div，绝对定位bottom:0;left:0;</div>
</div>
<hr/>
<div style="position:relative;border:1px solid orange;text-align:right;">
<span>父级div，文本居右</span>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">bottom定位错位了。文本居右的子元素div，绝对定位bottom:0;left:0;</div>
</div>
<hr/>
<p>IE6下的bottom定位错误的解决方法1：父级元素添加zoom:1;</p>
<div style="position:relative;border:1px solid orange;text-align:center;zoom:1;">
<span>父级div，文本居中，加了zoom:1;</span>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">文本居中的子元素div，绝对定位bottom:0;left:0;</div>
</div>
<hr/>
<p>IE6下的left定位错误的解决方法2：父级元素添加height;</p>
<div style="position:relative;border:1px solid orange;text-align:right;height:60px;">
<span>父级div，文本居右，加了height:60px;</span>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">文本居右的子元素div，绝对定位bottom:0;left:0;</div>
</div>
<br/>
</body>
</html>
IE6中很多Bug都可以通过触发layout得到解决，以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。其实不管left还是bottom错位，只要触发layout，就能正常定位了。
下列的CSS属性或取值会让一个元素获得layout：
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值
新闻热点
疑难解答
