2

データを表示するときに、結果の div 内のサムネイル フィールドの画像を中央に配置するために、このコードを使用しています。

<div class='result'>
    <div class='date_field'>15 Okt</div>
    <div class='thumbnail_field th_div'><img src='p.png' class='thumb'></div>
    <div class='content_field'><a href="p.html">p</a></div>
    <div class='price_field'>5</div>
</div>

.result{position: relative;background-color: white;height: 100px;overflow: hidden;margin: 0px 10px;}
.thumbnail_field{position: absolute;top: 8;left: 15%;width: 100px;height: 75px;background-color: #FFF;}
.th_div img{position: absolute;}

$(document).ready(function(){
var h = 75;
var w = 100;
$('.thumb').each(function(){
    $(this).load(function() {
        var width=$(this).width();
        var height=$(this).height();
        var ratio=width/height;
        var pwidth=$(this).parent().width();
        var pheight=$(this).parent().height();
        var newheight;
        var topmargin;
        var newwidth;
        var leftmargin;

        if(width/height>=4/3){
            $(this).css("width",w);
            newheight=w/ratio;
            topmargin=(h-newheight)/2;
            $(this).css("top",topmargin+"px")
        }else{
            $(this).css("height",h);
            newwidth=h*ratio;
            leftmargin=(w-newwidth)/2;
            $(this).css("left",leftmargin+"px")
        }

    });
});
});

Chrome と Firefox では動作しますが、IE 8 ではランダムに動作します。理由について何かヒントはありますか?

4

2 に答える 2

2

の代わりにinnerWidth()andを使用してみてくださいinnerHeight

width() and height()
于 2012-10-15T08:16:51.060 に答える
1

$.load 関数のキャッシュの問題である可能性があります。

ブラウザのキャッシュに画像がまだ存在しない場合、ロード関数のコールバックが起動します。画像がキャッシュに存在する場合、画像読み込み関数のコールバックは実行されません。これは、IE8 でのコードの不安定な動作を説明しています。

詳細はこちら: jQuery .load() problem in all IE versions

この警告は、jQuery の.load()説明ページにも記載されています: http://api.jquery.com/load-event/

解決策:

$(".thumb").one("load",function(){
// Add your positioning code here
})
.each(function(){
if(this.complete) $(this).trigger("load");
});

乾杯！

于 2012-10-15T08:27:59.483 に答える