0

divの行をすべて最も高いものの高さと一致させようとしているので、それらは均一に見えます。

私はこれについて多くのことを読みましたが、クロスブラウザで機能する解決策を見つけることができないようです.

私が使用している現在のスクリプトは次のとおりです。

    var maxHeight = 1;

    $('.thumbnail').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });

    $('.thumbnail').each(function() {
        $(this).height(maxHeight);
    });

論理的には、なぜこれが機能しないのかわかりませんか?

Firefox では問題なく動作しますが、Chrome と Safari では問題が発生するようです。

使用するフィドルは次のとおりです。http://jsfiddle.net/UtMz3/

本当に奇妙なのは、フィドルでは機能するが、私のサイトでは機能しないことです。

アップデート

何が起こっているかというと、画像が読み込まれる前に Chrome が DIV の高さを取得しているということです。したがって、Chrome は DIV サイズを 120px としましょう。その後、画像が読み込まれ、DIV サイズが 290px 程度に変更されます。なぜこれが起こっているのかわかりませんが、 $(document).ready({}) ラッパーにいるとこれが解決するはずです。また、ページの下部に JavaScript を配置しようとしましたが、それでも結果は同じです。

どんなアイデアやコメントでも大歓迎です、敬具、ジェームズ

4

1 に答える 1

1

これらの div にコンテンツがどのように配置されているかを調べる必要があります。にまだ表示されていない場合は$(document).ready()、コンテンツが動的に追加されている可能性があり、測定するには追加されるまで待つ必要があります。

コンテンツが追加されるまでの待機方法は、追加方法によって異なります。

$(document).ready()画像が読み込まれるのを待ちません。そのために使用する必要が$(window).load()あるため、コンテンツに画像が含まれている場合は、それらが読み込まれるのを待つ方法を見つける必要があります。 $(window).load()すべての画像が読み込まれるのを待つか、loadまだ読み込まれていない各画像オブジェクトにイベント ハンドラーをインストールして、読み込みが完了したときに通知を受け取ることができます。

于 2013-04-22T23:51:10.753 に答える