IE中的OffsetLeft和OffsetTop問題

在IE中嘗試創建一個工具提示時會遇到offsetLeft和offsetTop問題，每當我們點擊日曆上的不同事件時，都會創建一個工具提示。下面是代碼，它可以用於firefox，但創建問題爲IE。能告訴我這種情況的解決方案..IE中的OffsetLeft和OffsetTop問題

var ttip = __createElement("div","ttipbox","ttipbox"); //creating div 
target = document.getElementById("sDiv"+ndiv); //taking the object of event on click of it tooltip has to display. 

var x = target.offsetLeft ; 
var y = target.offsetTop - (currObj.childNodes[2].childNodes[0].childNodes[1].scrollTop + ttip.offsetHeight); 
ttip.style.top= y+15; 
ttip.style.left= x - 80; 
ttip.style.zIndex= "2000";

在此先感謝

來源

2009-07-31 Abhimanyu

是什麼問題？它出現在錯誤的位置？或根本沒有？ – scunliffe 2009-07-31 11:30:23

PS一般來說，我會將頂/左值設置爲包含'px'後綴的字符串。例如ttip.style.top =（y + 15）+'px'; – scunliffe 2009-07-31 11:31:38

的幾個注意事項：

1）你有一個DOCTYPE集？如果不是的話，你會進入怪異模式，這會改變IE渲染事物的方式。添加DOCTYPE將迫使IE以「更多」標準渲染。

2.）請嘗試添加'px';設置頂部/左側時的後綴。有一些已知的問題（我相信Firefox）在某些情況下沒有指定單元會導致奇怪的行爲。 3）驗證例如，即使使用alert（），IE中的x和y值也是您所期望的。

var x = ...; 
var y = ...; 
alert('x:' + x + ', y:' + y);

有了一些答案上述3個項目，我們應該能夠提供更多的信息/解決問題。

來源

2009-07-31 12:07:24 scunliffe

這就是您使用DOM庫的原因。

我可以看到第一個潛在的問題是代碼

currObj.childNodes[2].childNodes[0].childNodes[1]

如果你沒有「空白」，在你的DOM樹，

將只在一個跨瀏覽器的方式工作，因爲IE填充時忽略HTML「空白」在childNodes財產，而其他沒有：

<div id="mydiv"> 
    <span>Hello World</span> 
</div>

IE會報告mydiv.childNodes.length爲1（<span>），其他人3（"\n", <span>, "\n"）。

見Inconsistent Whitespace Text Nodes in Internet Explorer

其次，看@scunliffe's answer。

來源

2009-07-31 12:13:31

嗨，這可能沒有關係，但我想我會發佈一個解決方案，特別是IE7的工作，所有其他瀏覽器除IE7以外的其他工作。

我在IE7中target.offsetTop是未來比其他瀏覽器如目標元素的下背部被嵌套在其他元素

<div id="maindiv"> 
<input type="hidden" id="droptext" /> 
<input type="hidden" id="dropvalue" /> 
<div id="targetitems"> 
    <div id="targets"> 
    <div id="target_1"></div> 
    <div id="target_2"></div> 
    </div> 
</div> 
</div>

//IE7 
var target = ($("#target_1").length > 0) ? $("#target_1")[0] : null; 
if (target != null){ 
var targetTop = target.offsetTop; //e.g 14 
} 

//IE8 and Others same object but offsetTop was much larger 
var target = ($("#target_1").length > 0) ? $("#target_1")[0] : null; 
if (target != null){ 
var targetTop = target.offsetTop; //e.g 358 
}

在IE7

內。因此，你需要得到target.parentNode.offsetTop並添加它到target.offsetTop例如：

var targetTop = 0; 
var target = ($("#target_1").length > 0) ? $("#target_1")[0] : null; 
if (ie7){ 
targetTop = target.offsetTop + target.parentNode.offsetTop + target.parentNode.parentNode.offsetTop //will be determined by number of parents. 
}else{ 
targetTop = target.offsetTop; 
}

無論如何希望這可以幫助別人幫助我或者非常明確的問題。

來源

2011-12-05 14:54:34 zulucoda

在IE中應該有所幫助：

var obj = target.getBoundingClientRect(); 
var left = obj.left; 
var top = obj.top;

來源

2012-03-12 10:33:49 TOUDIdel

IE中的OffsetLeft和OffsetTop問題

回答

相關問題