Question

在尝试创建一个工具提示时面对IE中的offsetLeft和offsetTop问题，每次我们点击日历上的不同事件时都会创建这些问题。以下是适用于Firefox但对IE创建问题的代码。可以告诉我这个解决方案..

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";

提前致谢

Answer 1

IE中的

应该有所帮助：

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

Answer 2

这就是你使用DOM库的原因。

我能看到的第一个潜在问题是代码

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

如果你的DOM树中没有“空白”，那么

只能以跨浏览器的方式工作，因为IE在填充childNodes属性时会忽略html“空白”，而其他则不会：

<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。

Answer 3

一些注意事项：

1。）你有DOCTYPE集吗？如果不是，你将处于Quirks模式，这会改变IE呈现的方式。添加DOCTYPE将迫使IE以“更多”标准呈现。

2.）尝试添加'px';设置顶部/左侧时的后缀。有一些已知问题（我相信使用Firefox），在某些情况下，不指定单位会导致奇怪的行为。

3。）验证，例如即使有一个alert（），IE中的x和y值也是你所期望的。

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

通过对上述3个项目的一些回答，我们应该能够提供更多信息/解决问题。

Answer 4

嗨，这可能没有关系，但我想我会发布一个特别适用于IE7的解决方案，所有其他浏览器都可以工作，除了IE7。

对我来说，IE7中的target.offsetTop比其他浏览器低，例如 target元素嵌套在其他元素中

<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;
}

无论如何，希望这有助于某人肯定帮助我或非常明显的问题。

IE中的OffsetLeft和OffsetTop问题

4 个答案: