Chrome против Firefox для изображений с максимальной высотой

Question

Возьмите этот код и открыть его в Firefox и Chrome:

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
.container { 
 
    background: #EEE; 
 
    width: 100%; 
 
    height: 300px; 
 
    ; 
 
} 
 
img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    max-height: 300px; 
 
}

<div class="container"> 
 
    <img src="http://curiosidades.batanga.com/sites/curiosidades.batanga.com/files/Los-gatos-nos-ignoran-1.jpg" alt="" /> 
 
</div>

Вы должны reescale ширины контейнера (например,) reescaling фрейм или окно браузера (это может помочь: http://codepen.io/vandervals/pen/NqvYQZ)

Вы увидите разницу inmediatly: Chrome использует max-heightmax-width и в то же время для ограничивая масштаб изображения, в то время как firefox использует только max-height.

Кто-нибудь знает, как заставить firefox вести себя как хром? Какое из поведений является правильным, согласно спецификации?

Answer 1

Используй светлячок конкретных CSS, witht он код -moz Другим решением было бы использовать Хаки Browser Hack

Надеется, что это помогает :)

Answer 2

Я побежал это с и без " ! важная "декларация CSS и заметила незначительное улучшение для Firefox (и я имею в виду очень незначительное); Я действительно удостоверился, что я очистил свою историю до каждого прогона, но для этого может быть несколько причин. Они используют разные двигатели, поэтому они собираются решить, как они должны загружать вещи по-другому и когда (http://www.quora.com/What-makes-one-web-browser-faster-than-another - старая статья, но получает точку).

Ссылка Arjun для браузеров Hacks является хорошей, помогая оптимизировать ваш CSS, характерный для браузера.