jQueryで高さ(height)を取得する時、IEやFirefoxではうまく動作するけど、Google Chrome、Safariで動作しなくて困ったことは無いでしょうか?高さを調整するようなjavascriptを使用するとき私が毎回困ってしまいますので、自分のメモがてら紹介いたします。

1案.画像要素に高さを入れてみる

画像要素が
[html]
<img src="hoge.jpg" alt="画像" />
[/html]
となっている場合、画像の高さが考慮されない場合があります。そんな時は
[html]
<img src="hoge.jpg" alt="画像" height="100" />
[/html]
というように画像要素に高さを入れてあげましょう。
これだけでうまく動作することがあります。

2案.高さ関係のjQueryの読み込みをwindows.onloadに変更してみる

Google ChromeやSafariは仕様上画像等の要素を読み込む前に上記のJSが動いてしまうため、うまく動作しないことがあるようです。
そうであれば全ての要素を読み込んだ後画像を読み込めばよい話です。

[js]
$(function(){

});
[/js]
となっている部分を
[js]
<script>
window.onload = function() {

}
</script>
[/js]
に変更してみましょう。

自分の場合、上記のどちらかで問題は解消できます。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です