IE6下相對定位元素(DIV)內(nèi)絕對定位元素(DIV)的偏移定位Bug問題，即絕對定位元素的相對偏移元素是誰。一般情況下，是相對于父元素以上直到DOCUMENT（默認(rèn)已定位）的已定位元素（即position的設(shè)置)。但在IE6，IE5中出現(xiàn)的BUG卻是定位在已定位元素的外圍或以DOCUMENT相對而言。
在《精通CSS》30頁上面有這樣一段話：
引用:
相對于相對定位的祖先元素對框進行絕對定位，這在大多數(shù)現(xiàn)代瀏覽器中實現(xiàn)得很好。但是，在windows上的IE5.5和IE6中有一個BUG，如果試圖相對于相對定位的框的右邊或底部設(shè)置絕對定位的框的位置，那么需要確保相對定位的框已經(jīng)設(shè)置了尺寸。如果沒有，那么IE會相對于畫布定位這個框。簡單的解決方案時為相對定位的框設(shè)置寬度和高度。
但是，如果未添加寬度，那么瀏覽器可能給予父元素默認(rèn)的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; //可設(shè)置100%
height:200px; //可設(shè)置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
紫蝶∏飛揚↗ 閱讀(6337)
評論(1) 編輯 收藏 所屬分類:
CSS 、
div+css+js代碼