position:absolute定位在IE6下存在left和bottom的定位錯誤問題:
XHTML

<!--IE6下的left定位錯誤-->

<div style="position:relative;border:1px solid orange;text-align:center;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>

</div>

<!--IE6下的left定位錯誤-->

<hr />

<div style="position:relative;border:1px solid orange;text-align:right;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>

</div>

?

????????上面這段代碼在IE6中定位錯誤。解決辦法有兩種：1、給父層設置zoom:1觸發layout。 2、給父層設置寬度（width）。

XHTML

<!--解決方法1 zoom:1-->

<hr />

<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>

</div>

<!--解決方法2 設置width-->

<hr />

<div style="position:relative;width:99%;border:1px solid orange;text-align:center;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div>

</div>

?

?

????????下面的這段代碼在IE6下，bottom定位錯誤：

XHTML

<!--IE6下的bottom定位錯誤-->

<hr />

<div style="position:relative;border:1px solid orange;text-align:center;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;bottom:0;left:0;background:#CCC;">dovapour</div>

</div>

?

解決辦法和left定位類似：方法1是給父層設置zoom觸發layout，方法2是給父層設置高度（height）。

XHTML

<!--解決方法1 zoom:1-->

<hr />

<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a><br />

<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;bottom:0;left:0;background:#CCC;">dovapour</div>

</div>

<!--解決方法2 設置height-->

<hr />

<div style="position:relative;height:60px;border:1px solid orange;text-align:center;">

????<a href="http://www.dovapour.com.cn" title="vapour的blog">http://www.dovapour.com.cn/</a>

<div style="position:absolute;bottom:0;left:0;background:#CCC;">dovapour</div>

</div>

?

????????IE6中很多Bug都可以通過觸發layout得到解決，以上的解決方法無論是設置zoom:1還是設置width和height其實都是為了觸發layout。下列的CSS屬性或取值會讓一個元素獲得layout：????????

position:absolute?絕對定位元素的包含區塊(containing?block)就會經常在這一方面出問題

float:left|right?由于layout元素的特性，浮動模型會有很多怪異的表現

display:inline-block?當一個內聯級別的元素需要layout的時候就往往符用到它，這也可能也是這個CSS屬性的唯一效果----讓某個元素有layout

width:?除auto外的任何值

height:?除auto外的任何值

zoom:?除auto外的任何值

轉自:http://blog.sina.com.cn/s/blog_44ad44b20100fjft.html

轉載于:https://www.cnblogs.com/johnwonder/archive/2010/08/05/1792984.html

總結

以上是生活随笔為你收集整理的IE6下position:absolute的定位BUG(转载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。