<!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外的任何值
新聞熱點
疑難解答
