Почему Firefox и Chrome отображают этот образ по-разному?

Question

У меня осталось изображение по-другому в хроме и firefox.

Вот скрипка 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; 
} 

Answer 1

В светлячок, я изменил макс-высоту до высоты, и она работает так же, как Chrome ... первый, который устанавливает высоту до 300 пикселей - это тот, который сделал трюк.

Обновление ... Снимите максимальную высоту с 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; 
}