我的jQuery IMG中心脚本在Chrome和Safari中失败，但是在IE上工作？

Question

我有一个电子商务网站，我正在显示我的所有产品，缩略图需要以div为中心。中心在IE中工作（即使在兼容模式下），FF和Opera，但在Chrome和Safari中失败。在Chrome和Safari中，图像保留在div的顶部，并且不居中。我已经改变了我的CSS试图找到问题，但我似乎无法找到导致问题的原因？有人看到了吗？

IE（好）

CHROME（BAD）

JQUERY

var _h = $('div.product-image').height();
$('div.product-image img').each(function()
{
    var _top = (_h - $(this).height()) / 2;
    $(this).css('margin-top',_top);
});

CSS

.product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
.product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    text-align:center;
    border:1px solid #999;
}
.product-image img
{
    max-height: 100%;
    max-width: 100%;
    border:1pc solid #999;
}

HTML

<div id="content">
    <a href="#">
        <div class="product">
            <div class="product-image">
                <img src="1.jpg" />
            </div>
            <div class="product-model">sadf</div>
            <div class="product-price"> : 234</div>
        </div>
    </a>
    <a href="#">
        <div class="product">
            <div class="product-image">
                <img src="2.jpg" />
            </div>
            <div class="product-model">sdaf</div>
            <div class="product-bottom"> : 2345</div>
        </div>
     </a>
</div>

这是小提琴链接：http://jsfiddle.net/anaZD/

Answer 1

您可以查看一下，它对我有用：

How to vertical align image inside div

div {position:relative;}
    img {position:absolute;top:0;bottom:0;margin:auto;}
    .image {min-height:50px}

div是你的.product-image img是.product-image img

Answer 2

也许问题出在margintop上。 jQuery CSS使用＆＃39; marginTop＆＃39;而不是＆＃39; margin-top＆＃39;并且您可能希望这些图像相对地根据您对原始脚本的计算进行定位。

这是一个例子，你能否澄清一下你的目标是什么？见附件JsFiddle

Javacript

   var a=$;
   a.noConflict();

   var CountP=new Array();

    jQuery(function(a){

    a("div.product-image img").each(function(b,c){

    CountP[c]=(( a(this).parent('div').parent('div').height() -  a(this).height() )  / 2) +'px';

//我们去测试时发出警报

alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );

为确保浏览器兼容性，请尝试使用marginTop for CSS或类似示例， 位置：相对;顶部和左侧值;

   a(this).css({'border':'2px inset red','position':'relative',
'top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});

})



});

在jsfiddle.net上进行测试..希望它可以帮到你！ http://jsfiddle.net/mt5fk/93/

Answer 3

使用您提供的图像;）JS是相同的，但它不允许我使用链接

进行更新

 var a=$;
 a.noConflict();

var CountP=new Array();

 jQuery(function(a){
a("div.product-image img").each(function(b,c){

    CountP[c]=(( a(this).parent('div').parent('div').height() -  a(this).height() )  / 2) +'px';


    alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );


    //to ensure browser compatibility try with marginTop for CSS or like in this example, position:relative; top and left values;
    a(this).css({'border':'2px inset red','position':'relative','top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});



    });

 });

新JSFiddle

    http://jsfiddle.net/mt5fk/94/