Смещение OffsetLeft и OffsetTop в IE

Question

Столкновение с проблемами offsetLeft и offsetTop в IE при попытке создать одну подсказку, которая будет создаваться каждый раз, когда мы нажимаем на разные события в календаре. Ниже приведен код, который будет работать хорошо для 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 игнорирует html «пробелы» при заполнении свойства childNodes, в то время как другие не делают:

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

IE сообщит mydiv.childNodes.length как 1 (<span>), все остальные 3 ("\n", <span>, "\n").

См. Несовместимые пробельные текстовые узлы в Internet Explorer

Во-вторых, см. @ ответ Скунлиффа .

Answer 3

Привет, это может быть не связано, но я подумал, что выложу решение, которое подойдет именно для меня IE7, все другие браузеры работают, кроме IE7.

для меня target.offsetTop в IE7 возвращался ниже, чем в других браузерах, например целевой элемент вложен в другие элементы

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

В любом случае, надеюсь, что это поможет кому-то определенно помочь мне, или что-то совершенно другое.

Answer 4

Несколько заметок:

1.) У вас есть набор DOCTYPE? в противном случае вы будете в режиме Quirks, который изменяет способ рендеринга в IE. Добавление DOCTYPE заставит IE отображать «более» стандарты, например.

2.) Попробуйте добавить 'px'; Суффикс при настройке сверху / слева. Существуют известные проблемы (я полагаю, с Firefox), что в некоторых случаях отсутствие указания единиц вызывает странное поведение.

3.) Проверьте, например, даже с alert (), что значения x и y в IE - это то, что вы ожидаете.

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

С некоторыми ответами на вышеуказанные 3 вопроса мы сможем предоставить больше информации / решить проблему.