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()andinnerHeight而不是

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

这可能是 $.load 函数的缓存问题。

如果图像尚未出现在浏览器缓存中，则加载函数的回调会触发。如果图像存在于缓存中，则不会执行图像加载函数回调 - 这解释了 IE8 上代码的不稳定行为。

更多关于这里的信息：所有 IE 版本中的 jQuery .load() 问题

This caveat also listed in the jQuery .load() description page: http://api.jquery.com/load-event/

Solution: 

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

Cheers!

于 2012-10-15T08:27:59.483 回答