为什么Firefox和Chrome显示不同的图像？

我的图像在Chrome和Firefox中看起来显示不同。为什么Firefox和Chrome显示不同的图像？

这里是一个小提琴http://jsfiddle.net/SEOplay/4FGad/2/在firefox和chrome中打开它，你会看到图像的尺寸是不同的。

Chrome根据需要显示图像。

HTML

<div id="imageContent"> 
     <div id="bigImgCon">  
<a href="<?php echo $firstImg; ?>" rel="lightbox"><img id="firstImage" rel="lightbox" src="http://placekitten.com/200/400" /></a> 

     </div> 
    </div>

CSS

div#imageContent { 
    width:100%; 
    text-align:center; 
    margin:0 auto; 
} 
div#bigImgCon { 
    width:100%; 
    max-height:300px; 
    overflow:hidden; 
    position:relative; 
    margin-top:10px; 
    background-color:red; 
} 
img#firstImage { 
    max-width:100%; 
    max-height:100%; 
    cursor:hand; 
    cursor:pointer; 
    display:inline-block; 
}

来源

2014-02-18 UzumakiDev

这将是很棒的一些截图的差异。 – Vallentin

@Vallentin点击提供的jsfiddle链接，在Chrome中打开它，然后在Firefox中打开它。 – Matt

@Matt一个好的，独立的SO问题将包括屏幕截图。 – admdrew

在Firefox中，我改变最大高度高度和它的工作原理相同，Chrome浏览器...，设置高度的第一个到300px是一个伎俩。

更新...取出div＃bgImgCon的最大高度，并将其放在div＃imageContent类上。在我看来，这样做会为你解决问题。

div#bigImgCon { 
    width:100%; 
    overflow:hidden; 
    position:relative; 
    margin-top:10px; 
    background-color:red; 
} 
img#firstImage { 
    max-width:100%; 
    max-height:300px; 
    cursor:hand; 
    cursor:pointer; 
    display:inline-block; 
}

来源

2014-02-18 18:02:43 Matt

谢谢，但我需要'最大高度'为小于300像素的图像。 – UzumakiDev

您仍然可以拥有最大高度，但是如果您希望它显示图像的实际高度（与Chrome中相同），则必须包含高度属性。 http://www.w3schools.com/cssref/pr_dim_max-height.asp最大高度OVERRIDES高度。 – Matt

为什么downvote？我回答了 – Matt

为什么Firefox和Chrome显示不同的图像？

回答

相关问题