这段代码在firefox和ie6下，单击div时，会弹出div的绝对上边距，但是ff和ie6下的值不同。ff是对的，而ie是错的。大家帮我看看这个getTop是否有问题。。。。？？？？
<script>function getLeft(el){ var curleft=0; var obj=el; if(obj.offsetParent){ while(obj.offsetParent) { curleft+=obj.offsetLeft; obj=obj.offsetParent; } }else if(obj.x){ curleft+=obj.x; } return curleft; }function getTop (el){ var curtop=0; var obj=el; if(obj.offsetParent){ while(obj.offsetParent){ curtop+=obj.offsetTop; obj=obj.offsetParent; } }else if(obj.y){ curtop+=obj.y; } return curtop; }</script><table height="100%" width="100% border="1"><tr><td align="center"><div style="position:relative;vertical-align:middle;overflow:hidden; background-color: #009191; width:600px; height:450px;" id="motherboard" onclick="alert(getTop(this));"></div></td></tr></table>
function getOffset(obj) { var x = obj.offsetLeft || 0; var y = obj.offsetTop || 0; var temp = obj; while(temp.offsetParent) { temp = temp.offsetParent; x += temp.offsetLeft; y += temp.offsetTop; } return {left: x, top: y}; }其实最主要的原因可能是页面没有加这下面的CSS,所以导致浏览器出现解析差异。
CSS code * { padding : 0 ; margin : 0 ; }IE 默认情况下使用 IE 盒子模型，而 Firefox 使用的是 W3C 盒子模型。 在 HTML 上加上： <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 这一句就可以让 IE 使用 W3C 盒子了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> 皆可 在td中的元素会把第一个绝对／相对定位的hierarchy parent当作offsetParent，如果没有找到需要分三种情况讨论 一，如果该元素没有绝对／相对定位，则会把td当作offsetParent 二，如果该元素绝对／相对定位并且table没有绝对／相对定位，则会把body当作offsetParent 三，如果该元素绝对／相对定位并且table绝对／相对定位，则会把table当作offsetParent 看一下示例代码 1.<BODY > <TABLE BORDER=1 ALIGN=right> <TR> <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD> </TR>
</TABLE>
</BODY>
运行结果:parentdiv.offsetParent.tagName IS "body" sondiv.offsetParent.id IS "parentdiv" 2.<BODY > <TABLE BORDER=1 ALIGN=right> <TR> <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD> </TR></TABLE>
</BODY>
运行结果: parentdiv.offsetParent.tagName IS "body" sondiv.offsetParent.id IS "parentdiv" 3.<BODY> <TABLE BORDER=1 ALIGN=right> <TR> <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD> </TR></TABLE>
</BODY>
运行结果：parentdiv.offsetParent.tagName IS "TD" sondiv.offsetParent.tagName IS "body" 4.<BODY > <TABLE BORDER=1 ALIGN=right> <TR> <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD> </TR></TABLE>
</BODY>
运行结果: parentdiv.offsetParent.tagName IS "TD" sondiv.offsetParent.tagName IS "TD" 5.<BODY> <TABLE BORDER=1 ALIGN=right style="position:relative"> <TR> <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD> </TR></TABLE>
</BODY>
运行结果: parentdiv.offsetParent.tagName IS "Table"sondiv.offsetParent.tagName IS "parentdiv"
js.offsetParent属性 收藏参考：
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。
句法：
parentObj = element.offsetParent
变量：
· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。
js.offsetParent属性 收藏 参考：
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。
句法：
parentObj = element.offsetParent
变量：
· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。
测试代码1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</body>
</html>
测试结果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY
结论：
当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论时标准兼容模式还是怪异模式，根元素都为Body元素）
测试代码3：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Grandfather{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>
测试结果：
Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"
结论：
当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。
测试代码4：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#sonObj{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>
测试结果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY"
结论：
当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。
测试代码2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#parent{
position:absolute;
<!--position：relative;-->
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<div id="parent">div测试代码<p id="sonObj">测试OffsetParent属性</p></div>
</body>
</html>
测试结果：
Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"
结论：
当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。
