日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  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的沖突問題解決


【IE6/IE7下絕對定位position:absolute和margin的沖突問題解決】在FF和IE8下都沒有任何問題的，但是在IE6和IE7下有人如下兩個bug：
a, 絕對定義(position:absolute)的相鄰元素margin-top失效，但如果相鄰元素(layer3)去掉width屬性，margin-top又會生效 。b, layer1無法靠左，距離左邊的距離為layer1的第一個非絕對定義元素(layer3)的margin-left值 。解決方法：
1，添加代碼：![if lte IE 7]div/div![endif]，這也是網(wǎng)上找到的能夠完全解決問題的方法 。即代碼變?yōu)椋?br>
復制代碼代碼如下:
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;） 。即代碼變?yōu)椋?br>
復制代碼代碼如下:
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

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

    推薦閱讀