在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瀏覽器和其他瀏覽器中獲取元素位置

回答

相關問題