花了點時間研究了這幾個容易混的屬性，看看offsetLeft/offsetTop
本文假定你已經了解了DOM樹結構：
不如正題:
由于body的重要性，是以成為了document的一個屬性，可以document.body直接通路到。
html中body表明着我們要在浏覽器客戶區呈現的内容。
1.offsetLeft
<!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>offsetLeft探讨</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
background-color:#fff;
body
width:1000px;
padding:50px 0;
background-color:#efeede;
</style>
</head>
<body>
<div id="divTest" style="border:6px solid red;margin1:8px;padding:5px;">
<div id="dd">呵呵</div>
</div>
</body>
<script type="text/javascript">
var elemTest=document.body;
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
上面代碼在FF3/ie6/Opera9/safari3結果都如下:
沒看出什麼不同來。
2.接着添加代碼
為body添加border:5px solid red;
border:5px solid red;
出現了ie6/safari3/opera9都顯示:
0,0:null
而火狐3是
-5,-5:null
3.接着再為body加margin:5px 8px;
如下
margin:5px 8px;
}
結果：
FF3沒變還是
opera9/safari3也沒變還是
但ie6變了:
8,5:null
看來ie6是算上了margin.
4.看一下裡面的 元素
/*margin:5px 8px;*/
<div id="divTest">
var elemTest=document.getElementById('divTest');
在FF3/safari3中:
0,50:[object HTMLBodyElement]
ie6裡
0,50:[object]
看來FF3/safari3/ie6顯示一樣
在Opera9
5,55:[object HTMLBodyElement]
加上了border寬度。
繼續添加
#divTest
border:6px solid #393;
結果都沒有變。
繼續修改如下:
padding:10px;
margin:8px;
結果如下:
FF3和蘋果Safari3:
8,58:[object HTMLBodyElement]
看來都加上了margin:8px但padding不影響自己。
Opera9：
13,63:[object HTMLBodyElement]
opera9的計算offsetLeft=5px+8px=13px,而offsetTop=55px+8px=63px
也是加上了8px的外margin.
但是ie6的margin重疊了
8,50:[object]
ie6左右計算同FF3/safari3,offsetLeft=0px+8px的margin=8px
但是上下margin重疊是以offsetTop=max(50,8)=50px
結論:
Firefox3.0+, Safari3.0 , IE6
offsetLeft:元素的表框Border左上角距離Body内容區左上角的水準偏移。
Opera9:
offsetLeft:元素的表框Border左上角距離Body邊框Border左上角的水準偏移。
對于offsetTop計算,IE6有個上下margin重疊的問題。
為了驗證結論，再來幾個例子：
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#dd
<div id="divTest">
<div id="dd">呵呵</div>
<script type="text/javascript">
var elemTest=document.getElementById('dd');
FF3,Safari3:
24,74:[object HTMLBodyElement]
實際上是其父容器的偏移加上左邊框和左内距padding
如#divTest的offsetLeft=8px;
則#dd的offsetLeft=8px+(borderleft+padding-left)=8px+(6px+10px)=24px;
同理offsetTop=50px+8px+6px+10px=74px
而IE6:
24,66:[object]
隻是offsetTop由于重疊少了個8px的margin-top
29,79:[object HTMLBodyElement]
opera9
offsetLeft=body.(5px+0px)+#divTest.(8px+6px+10px)+#dd.margin-left=29px
總結公式:
FF3 safari3:
#elem.offsetLeft=body.paddingLeft+...+parent .marginLeft+parent.BorderLeft+parent.PaddingLeft+#elem.marginLeft
解釋:一個元素的左偏移offsetLeft=body的左padding+...中間的祖先的(marginLeft+borderLeft+paddingLeft)+自身的marginLeft
如
#dd.offsetLeft=0px+(8px+6px+10px)+7px=31px
Opera9
#elem.offsetLeft=body.(borderLeft+paddingLeft)+...+parent .marginLeft+parent.BorderLeft+parent.PaddingLeft+#elem.marginLeft
#dd.offsetLeft=(5px+0px)+(8px+6px+10px)+7px=36px
不過這個公式，當body有margin時，又不好用了，亂了，先不整理了。
如果body有margin時
ff3和safari3還要加上margin,但不加border很奇怪
而Opera9也會加上margin
IE比較堅守陣地，死活不加。
于是總結
如果body具有border時，幾個浏覽器計算有差異，如果記不住，最好不要給body加Border
這點看來Opera比較标準些，FF3和Safari卻不計算body的border.
IE不會加margin.
是以不要給body加border,這樣可以分
ie6和FF3/safari3/opera9一共2類
本文轉自 xcf007 51CTO部落格，原文連結：http://blog.51cto.com/xcf007/107948，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)