Chrome与Firefox的最大高度图像

Question

Take this code and open it in Firefox and in 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> 

You have to reescale the width of the container by (for example) reescaling the frame or the browser window (this may help: http://codepen.io/vandervals/pen/NqvYQZ )

You'll see the difference inmediatly: Chrome uses the max-height and the max-width at the same time for limiting the scale of the picture, while firefox, only uses the max-height .

Does anyone know how to make firefox behave like chrome? Which of the behaviours is the correct one, according to the spec?

Answer 1

Use firefox specific CSS, witht he code Another solution would be to use hacks Browser Hack

Hope this helps :)

Answer 2

I've ran this with and without the "!important" CSS declaration and saw a minor improvement for Firefox (and I mean very minor); I did make sure I cleared my history before each run but there could be a few reasons for that. They use different engines so they're going to decide how they should load things differently and when ( http://www.quora.com/What-makes-one-web-browser-faster-than-another - an old article but gets the point across).

The link Arjun for Browser Hacks is a good one to help optimize your CSS specific to the browser.