javascript - div のピクセル位置を把握する

Question

投稿する前に、jQuery と jQuery ValidationEngine を使用してフォームの検証を行っています。テストされているフィールドの 1 つは隠しフィールドです。これは、エラーが発生した場合に検証メッセージが画面外に表示されることを意味します。

次のコードを使用してメッセージをページの別の場所に固定していますが、異なるブラウザー間でメッセージを配置できないようです。FF 対 Chrome/IE。

 <form id="myForm">
        <input type="text" id="field1" name="field2" class="validate[required]" data-errormessage-value-missing="You must select your from the dropdown list." data-prompt-position="topRight"/>
        <input type="hidden" class="validate[required]" name="eId" id="eId" size="50" data-errormessage-value-missing="You must select from the dropdown list." data-prompt-position="topRight"/>
        <input type="submit"/>
        <div id="errorMe"/>
 </form>

エラーを配置するJavaScriptは次のとおりです。

var er = document.getElementById('errorMe');
var eId = document.getElementById('eId');
var erLeft = er.offsetLeft; /* + 25 */
var erTop  = er.offsetTop; /* - 950 */
console.log('pre = ' + eId.getAttribute('data-prompt-position'));
eId.setAttribute('data-prompt-position','topRight:'+erLeft+','+erTop);
console.log('post = ' + eId.getAttribute('data-prompt-position'));

2 つの異なる結果セット。FF では表示されるはずの場所から約 950 ピクセル下にあり、Chrome/IE では約 200 ピクセル下にあります。Safariも試していません。

それがうまくいかなかったとき、私はまた、左/上を使用して取得しようとしました:

function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();

var body = document.body;
var docElem = document.documentElement;

var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;

var top  = box.top +  scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;

return { top: Math.round(top), left: Math.round(left) }

}

しかし、それはまったく同じ値になりました。

ありがとう。