prototype.jsのoffsetLeftのブラウザ依存

質問

prototype.jsとprotoload.jsを使用して
ロード画面を作成しました。
http://youmos.com/news/protoload_js

テーブルのdivのidを指定してロード画面を組み込んだのですが
Fire Foxだと大丈夫だったのにＩＥだとロードイメージがすごくズレます。

ＩＥの場合だけmargin-left、margin-topを使ってロードイメージを調整したのですがブラウザの大きさを変えるとやはりずれてしまいます。

prototype.jsのoffsetLeftがブラウザによって値が変わってしまうのが
原因ぽいです。

このブラウザ依存をなくすか、offsetLeftの正しい取得方法など
わかる人いませんでしょうか？
よろしくお願いします。

回答No.2

leap_day

こんにちは

面白いものを知っておられますね（＾＾）
早速試してみましたが確かにIEだけmargin分ズレが生じたりウィンドウサイズを変えるととんでもないところに出てますね・・・

protoload.js内の45行目　window.setTimeout((function() {　というところに

element.style.position = "relative";

63行目　stopWaiting: function(element) {　というところに

element.style.position = "";

というのを { }内の先頭に付け加えてみてください
window.setTimeout((function() {
element.style.position = "relative";
if (this._waiting) {
って感じで

一応自分で試してみたところうまくいっているようなのですが・・・
http://chaosproduce.com/test/test1.html

回答No.1

arexis

HTML構造などの詳細がわからないのでとりあえずですが

body の style で margin:0px なら
IEでもFirefoxでも offsetLeftで同じ数値が戻ると思います。
body に margin をつけたり、デフォルトの状態だと、IEはこのmargin部分(またはデフォルトマージン)を含まずにoffsetLeft値を返すのでbodyからのoffsetと言う事。firefoxは このmargin分も含めてoffsetLeft値を返すので、枠からのoffsetと言う事。
だろうと思います。
デフォルトでは8pxくらいかな？ この分をIEの場合は足してやらねばならないのかも？

または、

bodyには style="margin:8px;" など特定の値を明確にCSS指定しておく。

function GetLeft(id){
var el = document.getElementById(id);
var px = 0;
while(el){ px += el.offsetLeft; el = el.offsetParent; }
return px;
}
GetLeft('id') でそのエレメントの正しい？offsetLeft値が取れるかもです。

これでいけるかどうかわかりませんけど、とりあえず質問者さんの組んでるページで試してみてください。

お礼

回答ありがとうございます。

body の style で margin:0pxをつけても、
ＩＥの場合だとoffsetLeftが常に０になってしまいました。
http://d.hatena.ne.jp/susie-t/20061004/1159942798#200610041723
このサイトを見る限り、offsetLeftの問題は深いみたいです。

なのでarexisさんのoffsetLeftの取得を参考に
protoload.jsを修正したらうまくいきました!!

下記protoload.jsの修正部分

window.setTimeout((function() {
if (this._waiting) {

var left = this.offsetLeft,
top = this.offsetTop ,
width = this.offsetWidth,
height = this.offsetHeight ,
l = this._loading;

　　　　　　　　// ＩＥのoffsetLeftズレ修正追加
if (this.isIE()) {

var el = $('lineupLoad');
var px = 0;
while(el){ px += el.offsetLeft; el = el.offsetParent; }
left = px;
// ＩＥのoffsetTopズレ修正追加
top = top + 15;
}

l.style.left = left+'px';
l.style.top = top+'px';
l.style.width = width+'px';
l.style.height = height+'px';
l.style.display = 'inline';
}
}).bind(element), timeUntilShow);

ありがとうございました。