IEでのオフセットのオフセットとオフセットの問題

Question

カレンダーでさまざまなイベントをクリックするたびに作成するツールヒントを作成しようとしているときに、IEのoffsetLeftとoffsetTopの問題が発生しました..次のコードは、 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

いくつかの注意事項：

1）あなたはDOCTYPEセットを持っていますか？そうでない場合は、IEがものをレンダリングする方法を変更するQuirksモードになります。 DOCTYPEを追加すると、IEは "より"標準的な方法でレンダリングされます。

2.） 'px'を追加してみてください。左/上を設定するときは接尾辞。いくつかのケースでは、ユニットを指定しないと奇妙な動作が起こるという既知の問題がある（私はFirefoxと信じている）。

3.） IEのxとyの値があなたが期待しているものであることを警告（）しても。

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

上記の3つの項目にいくつかの回答をして、問題を解決する必要があります。

Answer 2

これは、DOMライブラリを使用する理由です。私が見ることができる

まず潜在的な問題を取り込む際にIEがHTML「空白」を無視するので、あなたは、あなたのDOMツリーにない「空白」を持っていない場合は、コード

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

のみクロスブラウザ方式で動作しますですchildNodesプロパティ他にはないながら：

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

IEが報告されますmydiv.childNodes.lengthとして1（<span>）、他の皆3（"\n", <span>, "\n"）。第二に、@scunliffe's answerを参照してください

は

Inconsistent Whitespace Text Nodes in Internet Explorerを参照してください。

Answer 3

これは関連していないかもしれませんが、私はIE7以外のすべてのブラウザがIE7を除いて私のために働いていたソリューションを投稿すると思っていました。

は私のためにIE7で target.offsetTopは、あなたが target.parentNode.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 
} 

内にネストされた他のブラウザ例えば ターゲット要素よりも腰来ていましたそれに 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で

Answer 4

は役立つはず：

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