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> 

您必须通过（例如）重新缩放框架或浏览器窗口来重新缩放容器的宽度（这可能会有所帮助： http ://codepen.io/vandervals/pen/NqvYQZ）

您会立即看到差异：Chrome会同时使用max-height和max-width来限制图片的比例，而firefox只使用max-height 。

有谁知道如何使Firefox表现得像铬？ 根据规范，哪种行为是正确的？

Answer 1

使用特定于Firefox的CSS，并附带代码-moz另一个解决方案是使用黑客Browser Hack

希望这可以帮助 ：）

Answer 2

我已经在有和没有“！important” CSS声明的情况下运行了此程序，并且看到了Firefox的微小改进（我的意思是非常小的）； 我确实确保在每次跑步之前都清除了自己的历史记录，但是可能有一些原因。 他们使用不同的引擎，因此他们将决定如何以不同的方式加载内容以及何时加载（ http://www.quora.com/What-makes-one-web-browser-faster-than-another-一篇旧文章，但指出问题）。

链接Arjun for Browser Hacks是一个很好的链接，可以帮助优化特定于浏览器的CSS。