IE6和IE7下絕對定位position：absolute和margin的衝突問題解決

絕對定位的Position:absoulte的元素，會讓相鄰的兄弟元素的margin-top失效。而若是去掉了兄弟元素的高度又會正常。

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

效果圖：

從運行的效果圖能夠看到在chrome下是沒有問題的，在IE7下就出現了，我開頭所說的問題，FF也是沒有問題的！

BUG主要有如下兩個：一、Layer2在IE7下相鄰的兄弟結點即Layer3的margin-top沒有用了，二、layer2 沒法靠左，距離左邊的距離爲layer1的第一個非絕對定義元素(layer3)的margin-left值。

---

解決的方案有如下幾種：
一、添加代碼：添加代碼：<!–[if lte IE 7]>

<[endif]–>，這也是網上找到的可以徹底解決問題的方法。即代碼變爲：

<div style=」margin:20px; border:1px solid #F88; width:400px; 「> <div style=」position:absolute; background-color:#ccc;」>Absolute (layer2)</div> <!–[if lte IE 7]><div></div><![endif]–> <div style=」margin:30px auto; width:200px; height:80px; background-color:#36F;」>Normal Text Content (layer3)</div> </div>

二、外圍元素加position:relative定義，絕對定義元素加left和top定義。此方法能夠解決第二個bug，沒法解決第一個bug。也有說法用padding-top替代margin-top的，可是有時能夠這樣，有時候畢竟不行的。

<div style=」margin:20px; border:1px solid #F88; width:400px; position:relative」> <div style=」position:absolute; background-color:#ccc; left:0; top:0;」>Absolute (layer2)</div> <div style=」margin:30px auto; width:200px; height:80px; background-color:#36F;」>Normal Text Content (layer3)</div> </div>

三、這是本文所要闡述的方法，相對來講比較完美一些。給絕對定義元素添加「background-color:#CCC; float:left; display:inline;」定義，背景色千萬不能夠去掉，若是沒有背景色就加一個透明（background-color:transparent;）。即代碼變爲：

<div style=」margin:20px; border:1px solid #F88; width:400px;」> <div style=」position:absolute; background-color:#ccc; float:left; display:inline;」>Absolute (layer2)</div> <div style=」margin:30px auto; width:200px; height:80px; background-color:#36F;」>Normal Text Content (layer3)</div> </div>

參考：

http://www.jb51.net/css/74238.html