欧美日韩国产一区二区|qovd片|小明个人发布看看|小浪货你夹真紧水又多|老头把我添高潮了A片故|99热久久精品国产一区二区|久久久春色AV

  1. 首頁 > 生活經驗 > >

IE6/IE7下絕對定位position:absolute和margin的沖突問題解決

首先我們來看一個代碼：

復制代碼代碼如下:
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 /div

這個代碼的效果如下：

IE6/IE7下絕對定位position:absolute和margin的沖突問題解決

在FF和IE8下都沒有任何問題的，但是在IE6和IE7下有人如下兩個bug：
【IE6/IE7下絕對定位position:absolute和margin的沖突問題解決】a, 絕對定義(position:absolute)的相鄰元素margin-top失效，但如果相鄰元素(layer3)去掉width屬性 ， margin-top又會生效 。b, layer1無法靠左，距離左邊的距離為layer1的第一個非絕對定義元素(layer3)的margin-left值 。解決方法：
1，添加代碼：![if lte IE 7]div/div![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

2，外圍元素加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

3，這是本文所要闡述的方法，相對來說比較完美一些 。給絕對定義元素添加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

糾結了兩天，時刻都在思考這個問題的解決思路 ， 總算解決了 。感謝桃子 。

相關經驗推薦