DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS實例教程:IE6絕對定位錯位問題的解決方案
CSS實例教程:IE6絕對定位錯位問題的解決方案
編輯:CSS進階教程     

在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="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外的任何值

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved