IE6 下關於Position：absolute;屬性對同級元素的影響問題

今天小碼哥作一個專題頁面的時候，碰到一個關於IE6下position：absolute；屬性對同級元素的margin屬性有影響的問題。雖然，做爲前端人員，IE6下的Bug問題，始終讓人頭疼不已。但生活在Zhong國的碼民們只能繼續忍受。

言歸正傳，是什麼問題呢？

即：假如在一個設有position：relative；相對定位屬性的div盒子裏，同時放另外兩個div塊級元素layer2,layer3。layer2設有position：absolute；屬性，layer3設有margin:30px auto;屬性。在正常的標準瀏覽器下，layer3設置的margin屬性值是能夠起到效果的。但在IE6下，你會發現layer3設置的margin屬性值不起做用了。

先看代碼一：

<div id="layer1" style=" border:1px solid #F88; width:500px;margin:20px;position:relative;text-align:center;"> 

<div id="layer2" style="position:absolute; background-color:#ccc;width:180px;height:40px;left:0;top:0;">Absolute (layer2)</div> 

<div id="layer3" style="margin:30px auto; width:200px; height:80px; background-color:#36F;border:1px solid #ccc;">Normal Text Content (layer3)</div> 

</div>

其運行在標準瀏覽器及IE7+裏：效果圖以下

再看IE6下效果圖：

在上圖，咱們能夠看到，layer3設定的margin值，在IE6下是不起做用的。

這是怎麼形成的呢？我想應該是在IE6下position：absolute；屬性做爲浮動元素，脫離了其本來的文檔流而形成的對其同級元素的影響。

咱們該怎麼解決該問題呢，我想按照通常人的思想就是，針對IE6下的layer3元素設定IE6 Hack，讓其也加上一個position：absolute；屬性，讓你top值等於正常瀏覽器下layer3設定的margin值。

但這樣，有時候感受不是解決問題的根本方法，沒有處理IE6下position屬性的浮動問題。

所以，小碼哥也是眼手結合，在網上看到一個大神，給出的是，在設有position：absolute；屬性的layer2元素外層再加一個div盒子，不用設定任何樣式，讓其和layer3不屬同級元素。這樣也就解決了，layer2元素因浮動問題對layer3元素形成的影響。

看代碼二：

<div id="layer1" style=" border:1px solid #F88; width:500px;margin:20px;position:relative;text-align:center;"> 

<div><div id="layer2" style="position:absolute; background-color:#ccc;width:180px;height:40px;left:0;top:0;">Absolute (layer2)</div></div>

<div id="layer3" style="margin:30px auto; width:200px; height:80px; background-color:#36F;border:1px solid #ccc;">Normal Text Content (layer3)</div> 

</div>

看到針對layer2添加的紅色div盒子了嗎？就這樣，省事又完美的解決了IE6下因position屬性而形成的同級元素之間的相互影響的問題。

這樣，在全部的瀏覽器下，其顯示效果圖以下：

除了以上問題，小碼哥發現針對文字居中的text-align：center；屬性，在標準瀏覽器及IE7+等瀏覽器裏，其針對的對象都是內聯元素才起做用。但在IE6下，該屬性，對塊級元素也是起做用的。呃呃呃，蛋疼啊，，，，，，