IE6/7下絕對定位（position:absolute）元素消失
阿新 • • 發佈：2019-01-28
在IE6、7中如果一個浮動元素與絕對定位元素相鄰的話，在某些情況下絕對定位元素將會消失。在網上找了一下，有如下解釋：
1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時，以及沒有清除浮動時，IE6/7，FF中顯示一致；
測試程式碼1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6/7絕對定位元素消失-110201.com</title>
<style type="text/css">
.wrap { position:relative; width:300px; height:120px; margin:0 auto; background-color:#000 }
.pa { position:absolute; top:10px; right:10px; height:20px; padding:5px; width:20px; border:1px solid #fff; background-color:#f00; color:#00f; line-height:20px; }
.floatDiv { float:left; width:200px; height:100px; line-height:100px; text-align:center; background-color:#0ff; color:#f00; }
</style>
</head>
<body>
<div class="wrap">
<div class="floatDiv">Float A</div>
<div class="pa">PA</div>
</div>
</body>
</html>結果：IE6、7、8、9、Firefox下均表現正常。
2.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時，有清除浮動時，IE6/7不顯示絕對定位層，FF顯示；
只需在測試程式碼1的基礎上，在.pa的樣式中加入clear:both屬性即可。
結果：IE6、7、8、9、Firefox下均表現正常，與上面的描述有差異，不知為何。。。
3.當絕對定位層的鄰近浮動層的寬度等於父層寬度時，以及沒有清除浮動時，IE6不顯示絕對定位層，IE7/FF顯示；
只需在測試程式碼1的基礎上，把.floatDiv中的width屬性值改為300px即可。
結果：IE6中絕對定位元素消失，IE7、8、9、Firefox正常，與上面的描述無異。
4.當絕對定位層的鄰近浮動層的寬度等於父層寬度時，有清除浮動時，IE6/7不顯示絕對定位層，FF顯示；
只需在測試程式碼1的基礎上，把.floatDiv中的width屬性值改為300px，在.pa的樣式中加入clear:both屬性即可。
結果：IE6、7、8、9、Firefox下均表現正常，與上面的描述有差異，不知為何。。。
測試環境：win7 IEtester V0.4.11 Firefox 9.0.1
上面的問題可能是由於環境的原因，因為IEtester在win7下還有很多問題，如：IE7不能開啟非伺服器解析的檔案（本地的檔案拖進去沒反映），IE6的透明效果等等。
最後就是上面問題的解決方法：把絕對定位元素和浮動元素分開，就是在兩個元素中間加一個空白的div就行啦！