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

我们都知道IE6很难。但是，与Firefox或其他浏览器相比，在IE的更高版本中定位时似乎也存在不同的行为。我有一对简单的javascript函数，它查找元素的位置，然后显示与第一个元素相关的另一个元素。这个想法是当鼠标悬停在第一个元素的前面时，让第二个元素稍微大一些。它工作正常，除了所有版本的Internet Explorer之外，第二个元素的位置与Firefox中的位置不同。在IE浏览器和其他浏览器中获取元素位置

代码即可获得一个元素的位置是：

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中看起来很不错。这是什么原因发生的，有没有办法解决它？

来源

2010-04-11 Channel72

我会给你带来怀疑的好处，并假设你自己编写这样的代码有一个很好的理由，但一定要快速获得一些指导的方法是阅读jQuery或其他相关代码框架，因为这正是他们旨在规范化的行为。 – Pointy 2010-04-11 13:26:04

我第二点什么波蒂说。对于自己来说，所有的应有的尊重，这些框架旨在使这样的事情变得容易。 – 2010-04-11 13:28:20

请不要阻止人们学习。另外，大型图书馆也不是绝对可靠的。 – 2010-04-11 22:54:29

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

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

（有可以令人信服地取决于究竟是如何elem2定位IE和其他浏览器之间的差异。）

来源

2010-04-11 13:46:35 bobince

作为尖尖的评论最好的办法是去查找了jQuery（或YUI这可能是更可读）的代码。主要由IE quirksmode需要规范化（但它不是唯一的问题）。例如（但我不确定）我认为你需要在while循环中添加到每个定位的绝对/相对元素的左/最大总量边界的大小，但在IE6中，只需要添加边界至少在quirksmode中是绝对的。

您的代码可能工作不增加只有当你使用DOCTYPE（无论是过渡或严格）的HTML页面的非常一号线和重置身体/ HTML边框/边距和填充更多的正常化。换句话说使用这条线在你的网页的开头：

<!DOCTYPE...

，并在你的CSS：

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

这些反正可能不足以。

来源

2010-04-11 14:02:44

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

回答

相关问题