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像chrome一样？根据规范

，哪种行为是正确的

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链接非常适合帮助优化特定于浏览器的CSS。

Chrome与Firefox适用于max-height的图片

2 个答案: