ちょっとわかりにくいOperaでのトラブル

beanz (2009年8月 4日 10:52) | コメント(0) | トラックバック(0)

Prototype.jsを使っていてちょっと悩んだ事があった。
下記のようなごくごく単純なHTMLがあったとして 

<body>
<img id="item" src="images/image.jpg" />
</body>

それに対して以下のようなスタイルが適用されている 

#item {
    position: absolute;
    top: 100px;
    left: 100px;
}

さらにjavascript（Prototype.jsを使い）で 

Event.observe(window, 'load', function(event) {
    alert($('item').getStyle('left'));
});

と、読み込みが完了した時点でアラートを表示させているが当然これは『100px』と表示される。
ここまでは何の問題もない。ただしちょっとスタイル下記のようにをいじってみて、 

#item {
    position: absolute;
    top: 100px;
    left: 100px;
    border: 10px solid #CCC;
}

同じように実行するとなぜかOperaでだけ『80px』と表示されてしまう。足されたボーダーのwidth分だけ引かれてしまっている。
さらにスタイルをいじり 

#item {
    position: absolute;
    top: 100px;
    left: 100px;
    border: 10px solid #CCC;
    padding: 10px;
}

こうすると今度は『60px』と表示され、padding分まで引かれてしまった。
このままこの数値を元にドラッグの処理などを実装していくとOperaでだけ挙動がおかしくなってしまう。
とはいえ、簡単な解決方法があった。一つは 

$('item').getStyle('left');

のところを 

document.defaultView.getComputedStyle($('item'), null)['left'];

と、Prototypeのメソッドを使わずネイティブのgetComputedStyleメソッドを使うだけで正常な値を得る事ができる（ただし、今度はIEでうまくいかなくなる、なのでブラウザを判別する処理が必要になってしまう）。
もしくは、要素を内包している要素、この場合は『body』に対して『position』プロパティを設定してあげれば 

body {
    position: relative; #static以外にする
}

うまくいく。こっちの方が簡単だ。

カテゴリ：

トラックバック(0)

トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/77

コメントする