ie下求div的绝对边距有误，求解

这段代码在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>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我这个帖子不小心结贴后发错地方了，拜托版主帮我移到javascript那里，谢谢您
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,所以导致浏览器出现解析差异。
*{padding:0;margin:0;}
楼上的，我用了您的办法，还是不行啊
<style>
*{padding:0;margin:0;}</style>
<script>    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};
    }</script>
<body>
<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(getOffset(this).top);"></div>
</td></tr></table>
</body>
table height="100%"
div边距肯定会随窗口大小变化的
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">皆可
我把doctype加上了，ff下是对的，ie下div的绝对上边距还是不对！！！<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<style>
*{padding:0;margin:0;}
</style>
<script>
    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};
    }</script>
<body style="height:100%;width:100%;">
<table height="500px;" width="100%" border="1">
<tr height="100%" width="100%"><td height="100%" width="100%" align="center" valign="middle">
<div style="position:relative;vertical-align:middle;overflow:hidden; background-color: #009191; width:600px; height:450px;" id="motherboard" onclick="alert(getOffset(this).top);"></div>
</td></tr></table>
</body>
这段代码在ie6下运行为52，在ff下为25,（25是对的）
ie的误差是怎么产生的，怎么那么大呢？
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<style>
*{padding:0;margin:0;}
</style>
<script>
  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};
  }</script>
<body style="height:100%;width:100%;">
<table height="500px;" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr height="100%" width="100%"><td height="100%" width="100%" align="center" valign="middle">
<div style="position:relative;vertical-align:middle;overflow:hidden; background-color: #009191; width:600px; height:450px;"  id="motherboard" onclick="alert(getOffset(this).top);"></div>
</td></tr></table>
</body>
我是楼主，我把这个问题整理了一下，发现问题出在这里：我把代码缩减了一下，当一个高度为450的div以“居底”放在高度为500的td里，在ff下，offsetTop是50,ie下是100，ie下的这个结果当然是错的，大家帮我看看<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<style>
*{padding:0;margin:0;}
</style>
<html>
<body style="height:100%;width:100%;">
<table height="500px;" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="100%" width="100%"><td height="100%" width="100%" align="center" valign="bottom">
<div style="position:relative;vertical-align:middle;overflow:hidden; background-color: #009191; width:600px; height:450px;"  id="motherboard" onclick="alert(this.offsetTop);"></div>
</td></tr></table>
</body></html>
这是EXTJS里面的方法，看看别人是怎么考虑全面的！
getXY : function(el) {
    var p,
        pe,
        b,
        bt,
        bl,
        dbd,
        x = 0,
        y = 0,
        scroll,
        hasAbsolute,
        bd = (doc.body || doc.documentElement),
        ret = [0,0];

    el = Ext.getDom(el);

    if(el != bd){
        if (el.getBoundingClientRect) {
            b = el.getBoundingClientRect();
            scroll = fly(document).getScroll();
            ret = [ROUND(b.left + scroll.left), ROUND(b.top + scroll.top)];
        } else {
            p = el;
            hasAbsolute = fly(el).isStyle("position", "absolute");

            while (p) {
                pe = fly(p);
                x += p.offsetLeft;
                y += p.offsetTop;

                hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute");

                if (Ext.isGecko) {
                    y += bt = PARSEINT(pe.getStyle("borderTopWidth"), 10) || 0;
                    x += bl = PARSEINT(pe.getStyle("borderLeftWidth"), 10) || 0;

                    if (p != el && !pe.isStyle('overflow','visible')) {
                        x += bl;
                        y += bt;
                    }
                }
                p = p.offsetParent;
            }

            if (Ext.isSafari && hasAbsolute) {
                x -= bd.offsetLeft;
                y -= bd.offsetTop;
            }

            if (Ext.isGecko && !hasAbsolute) {
                dbd = fly(bd);
                x += PARSEINT(dbd.getStyle("borderLeftWidth"), 10) || 0;
                y += PARSEINT(dbd.getStyle("borderTopWidth"), 10) || 0;
            }

            p = el.parentNode;
            while (p && p != bd) {
                if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) {
                    x -= p.scrollLeft;
                    y -= p.scrollTop;
                }
                p = p.parentNode;
            }
            ret = [x,y];
        }
    }
    return ret
},
谢谢楼上，我根据您的思路继续做了搜索，在这里把我搜索的结果贴出来，
这个函数叫getXY，是YUI的，这个函数的结果在ie下是正确的isSafari = (document.childNodes && !document.all && !navigator.taintEnabled);
    var getXY = function(el) {
        if (document.documentElement.getBoundingClientRect) { // IE
            var box = el.getBoundingClientRect();

            var rootNode = el.ownerDocument;
            return [box.left + getDocumentScrollLeft(rootNode), box.top +
                    getDocumentScrollTop(rootNode)];
        } else {
            var pos = [el.offsetLeft, el.offsetTop];
            var parentNode = el.offsetParent;

            // safari: subtract body offsets if el is abs (or any offsetParent), unless body is offsetParent
            var accountForBody = (isSafari &&
                    el.style['position'] == 'absolute' &&
                    el.offsetParent == el.ownerDocument.body);

            if (parentNode != el) {
                while (parentNode) {
                    pos[0] += parentNode.offsetLeft;
                    pos[1] += parentNode.offsetTop;
                    if (!accountForBody && isSafari &&
                            parentNode.style['position'] == 'absolute' ) {
                        accountForBody = true;
                    }
                    parentNode = parentNode.offsetParent;
                }
            }

            if (accountForBody) { //safari doubles in this case
                pos[0] -= el.ownerDocument.body.offsetLeft;
                pos[1] -= el.ownerDocument.body.offsetTop;
            }
            parentNode = el.parentNode;

            // account for any scrolled ancestors
            while ( parentNode.tagName && !/^body|html$/i.test(parentNode.tagName) )
            {
               // work around opera inline/table scrollLeft/Top bug
               if (parentNode.style['display'].search(/^inline|table-row.*$/i)) {
                    pos[0] -= parentNode.scrollLeft;
                    pos[1] -= parentNode.scrollTop;
                }

                parentNode = parentNode.parentNode;
            }

            return pos;
        }
    }
    getDocumentScrollLeft = function(doc) {
        doc = doc || document;
        return Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
    },

    /**
     * Returns the top scroll value of the document
     * @method getDocumentScrollTop
     * @param {HTMLDocument} document (optional) The document to get the scroll value of
     * @return {Int}  The amount that the document is scrolled to the top
     */
    getDocumentScrollTop = function(doc) {
        doc = doc || document;
        return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
    }