IE6絕對定位的bug及其解決辦法。position:absolute定位在IE6下存在left和bottom的定位錯誤問題：

<!–IE6下的left定位錯誤–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>
<!–IE6下的left定位錯誤–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:right;”>
     <a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>

上面這段代碼在IE6中定位錯誤。解決辦法有兩種：

1、給父層設(shè)置zoom:1觸發(fā)layout。

2、給父層設(shè)置寬度（width）。

<!–解決方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>

<!–解決方法2 設(shè)置width–>
<hr />
<div style=”position:relative;width:99%;border:1px solid orange;text-align:center;”>
<a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>

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

<!–IE6下的bottom定位錯誤–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>

解決辦法和left定位類似：

方法1是給父層設(shè)置zoom觸發(fā)layout。

方法2是給父層設(shè)置高度（height）。

<!–解決方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a><br />
<a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>

<!–解決方法2 設(shè)置height–>
<hr />
<div style=”position:relative;height:60px;border:1px solid orange;text-align:center;”>
<a href=”http://m.survivalescaperooms.com”>http://m.survivalescaperooms.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>武林網(wǎng)CUOXIN</div>
</div>

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

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

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

display:inline-block 當(dāng)一個內(nèi)聯(lián)級別的元素需要layout的時候就往往符用到它，這也可能也是這個CSS屬性的唯一效果—-讓某個元素有l(wèi)ayout

width: 除auto外的任何值

height: 除auto外的任何值

zoom: 除auto外的任何值