IE6下相對定位元素(DIV)內絕對定位元素(DIV)的偏移定位Bug問題，即絕對定位元素的相對偏移元素是誰。一般情況下，是相對于父元素以上直到DOCUMENT（默認已定位）的已定位元素（即position的設置)。但在IE6，IE5中出現的BUG卻是定位在已定位元素的外圍或以DOCUMENT相對而言。
在《精通CSS》30頁上面有這樣一段話：
引用:
相對于相對定位的祖先元素對框進行絕對定位，這在大多數現代瀏覽器中實現得很好。但是，在windows上的IE5.5和IE6中有一個BUG，如果試圖相對于相對定位的框的右邊或底部設置絕對定位的框的位置，那么需要確保相對定位的框已經設置了尺寸。如果沒有，那么IE會相對于畫布定位這個框。簡單的解決方案時為相對定位的框設置寬度和高度。
但是，如果未添加寬度，那么瀏覽器可能給予父元素默認的100%寬度。而若未添加高度，在Firefox 3及IE 6下都無法看到絕對定位的子元素的。也就是說，IE 6下絕對定位子元素并沒有相對于畫布定位。
測試通過沒有問題：
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
* { margin:0;padding:0;}
#brading{
position:relative;
width:200px; //可設置100%
height:200px; //可設置100%
border:1px solid red;
background:#ccc;
}
#brading .tel{
position:absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="brading"><div class="tel">tel:000-000-999</div></div>
</body>
</html>
posted on 2011-01-13 17:52
紫蝶∏飛揚↗ 閱讀(6343)
評論(1) 編輯 收藏 所屬分類:
CSS 、
div+css+js代碼