爲什麼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顯示不同的圖像？

回答

相關問題