IE6/7在滾動區域內的標簽使用position會飄出這個滾動區域不隨滾動條滾動

最近才發現IE6、IE7存在這樣一個BUG:在滾動區域(DIV中)內,如果里面的標簽使用了position(absolute/relative) , 則會飄出這個滾動區域,且不會隨滾動條而滾動(靜止不動) 。如下所示(只在IE6和IE7中才會出現此BUG):
測試
測試
測試
測試
這個是測試文字
測試
測試
測試
【IE6/7在滾動區域內的標簽使用position會飄出這個滾動區域不隨滾動條滾動】測試

代碼如下:

復制代碼代碼如下:
div style="height:60px;overflow:auto;border:1px #ccc solid;"
p測試/p
p測試/p
p測試/p
p測試/p
p style="position:relative;color:red;"這個是測試文字/p
p測試/p
p測試/p
p測試/p
p測試/p
/div


在IE6或IE7中,會發現這個測試文字不在滾動條區域內,由于代碼受本站此頁面代碼的影響,所以看不到那行測試文字(頁面未加載完時應該可以看到) , 大家可以復制代碼在本地測試 。
解決的方法就是:給父級(即出現滾動條的元素)添加一個position:relative;即可

相關經驗推薦