offsetTop,offsetLeft

scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

IE67和FF的offsetTop解释结果不同，FF下其offsetParent为body,IE67下其offsetParent为父级元素。

即：elem.offsetTop=elem.offsetTop+elemFather.offsetTop+elemFatherFather.offsetTop......

兼容性写法:

function getOffset(el){
    var _t =el.offsetTop;
         while(el = el.offsetParent){
        _t += el.offsetTop;
    }
    return _t;
}

while(el = el.offsetParent)

如果 el.offsetParent 存在，则加上他的offsetTop,一直循环，直到没有offsetParent;下面是个测试的例子：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>offsetTop,offsetParent</title>
 6 <style type="text/css">
 7     *{ margin:0; padding:0;}
 8     div{width:400px;margin-top:20px; background-color:#000; height:300px; overflow:hidden}
 9     p{ margin-top:30px; background-color:#F00; height:200px; overflow:hidden}
10     a{display:block; margin-top:100px; background-color:#fff; height:20px;}
11 </style>
12 </head>
13 
14 <body id="the_body">
15 <div id="the_div">
16     <p id="the_p">
17         <a href="#" id="the_a">offsetTop</a>
18     </p>
19 </div>
20 <script type="text/javascript">
21     function getOffset(el){
22         var _t =el.offsetTop;
23         var n=0;
24          while(el = el.offsetParent){
25         _t += el.offsetTop;
26                 n++;
27                 alert('我有'+n+'个offsetParent')
28     }
29     return _t;
30     }
31     alert(getOffset(document.getElementById('the_a')));
32     alert(document.getElementById('the_a').offsetTop); //IE67下 结果为100，没有加上父级的offsetTop
33 </script>
34 
35 </body>
36 </html>