CSS实例教程:IE6相对定位错位效果的处置方案
日期：2013-11-28 浏览次数：21649 次
在IE6中设置绝对定位，在left与bottom都会出现错位问题。
配合以下代码，可以帮你理解这个问题，比较下现代浏览器与IE6的差异就知道问题在哪了。
另外，对于定位还没掌握好的同学，看看这个是很有协助的，记得用firebug调试，尝试着修正几个款式。
<!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="pos
