| 搜索 |
<!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>