Javascript 获取IE中元素相对于其他浏览器的位置

我们都知道IE6很难。但与Firefox或其他浏览器相比，IE在更高版本中的定位似乎也有不同的行为。我有一对简单的javascript函数，可以找到一个元素的位置，然后显示与第一个元素相关的另一个元素。这样做的目的是，当鼠标悬停在第二个元素上时，它会显示在第一个元素的前面，这个元素稍大一些。它工作正常，除了在所有版本的InternetExplorer上，第二个元素的位置似乎与Firefox不同

获取元素位置的代码为：

function getPosition(e) 
{
    var left = 0;
    var top  = 0;

    while (e.offsetParent) {
        left += e.offsetLeft;
        top  += e.offsetTop;
        e = e.offsetParent;
    }

    left += e.offsetLeft;
    top += e.offsetTop;
    return {x:left, y:top};
}

实际翻转显示代码为：

var pos = getPosition(elem1);
elem2.style.top = pos.y - 8;
elem2.style.left = pos.x - 6;

在Firefox中，

elem2

直接出现在

elem1

上方，正如我所希望的那样。但在IE7或IE8中，这似乎是远远不够的。发生这种情况的原因是什么，有没有办法解决

elem2.style.top = pos.y - 8;

CSS需要一个单元<代码>+'px'

---

（IE和其他浏览器之间可能存在差异，这取决于

elem2

的准确定位。）

正如Pointy评论的那样，最好是去查找jQuery（或者可能更可读的YUI）代码。IE quirksmode主要需要规范化（但这不是唯一的问题）。例如（但我不确定）我认为您需要将while循环中遇到的每个定位绝对/相对元素的左/顶总边框大小添加到左/顶总边框大小中，但在IE6中，您只需要在至少在quirksmode中位置是绝对的情况下添加边框

只有在将DOCTYPE（过渡或严格）用作HTML页面的第一行并重置正文/HTML边框/页边距和填充时，代码才能正常工作，而无需添加更多规范化。换句话说，在页面开头使用这一行：

<!DOCTYPE...

---

无论如何，这些可能还不够

我会给你一个疑问，并假设你有一个很好的理由自己编写这样的代码，但是获得一些指导的一个快速方法肯定是阅读jQuery或其他类似框架中的相关代码，因为这正是他们设计用来规范的行为ze.我支持Pointy所说的。在充分尊重自己的基础上，这些框架的设计目的是让这样的东西变得简单。请不要阻止人们学习。此外，大型图书馆也不是绝对正确的。

html, body {margin: 0; padding: 0; border-width: 0;}