OffsetLeft and OffsetTop issue in IE

问题:

Facing offsetLeft and offsetTop problem in IE while trying to create one tooltip which will create each time when we click on different events on calendar.. the following is the code which will work good for firefox but creating problem for IE. can tell me the solution for this..

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

Thanks in advance

回答1:

in IE should help:

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

回答2:

This is why you use a DOM library.

First potential problem I can see is the code

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

will only work in a cross-browser fashion if you have no "whitespace" in your DOM tree, since IE ignores html "whitespace" when populating the childNodes property while other do not:

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

IE will report mydiv.childNodes.length as 1 (<span>), everyone else 3 ("\n", <span>, "\n").

See Inconsistent Whitespace Text Nodes in Internet Explorer

Secondly, see @scunliffe's answer.

回答3:

A few notes:

1.) Do you have a DOCTYPE set? if not you will be in Quirks Mode which alters the way IE renders things. Adding the DOCTYPE will force IE to render in a "more" standards like way.

2.) Do try adding the 'px'; suffix when setting the top/left. There are known issues (I believe with Firefox) that in some cases not specifying the units causes odd behavior.

3.) Verify e.g. even with an alert() that the x, and y values in IE are what you are expecting.

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

With some answers to the above 3 items, we should be able to provide more info/solve the problem.

回答4:

hi this might not be related but i thought i would post a solution that has worked for me specifically IE7, all other browsers work except IE7.

for me the target.offsetTop in IE7 was coming back lower than other browser e.g target element is nested within other elements

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

Therefore in IE7 you need to get the target.parentNode.offsetTop and add it to target.offsetTop e.g:

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

Anyway hope this helps someone definitely helped me or tho very distinct issue.