Question

我们都知道IE6很难。但是，与Firefox或其他浏览器相比，IE的后续版本中的定位似乎也存在不同的行为。我有一对简单的javascript函数，它们找到元素的位置，然后显示与第一个元素相关的另一个元素。这个想法是当鼠标悬停在第一个元素前面时，第二个元素（稍大一些）出现在第一个元素的前面。它工作正常，除了在所有版本的Internet Explorer上，第二个元素的位置与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中它似乎已经过时了。这种情况发生的原因是什么，有没有办法解决它？

Answer 1

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

CSS需要一个单位。 +'px'。

（可以想象，IE和其他浏览器之间存在差异，具体取决于elem2的确切位置。）

Answer 2

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

只有当您使用DOCTYPE（Transitional或Strict）作为HTML页面的第一行并重置body / html边框/边距和填充时，代码可能无法添加更多规范化。换句话说，在页面的开头使用此行：

<!DOCTYPE...

并在你的CSS中：

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

无论如何可能还不够。

在IE中获取元素与其他浏览器的位置

2 个答案: