为什么 Firefox 和 Chrome 显示此图像的方式不同？答案

【问题标题】：Why do Firefox and Chrome display this image differently?为什么 Firefox 和 Chrome 显示此图像的方式不同？
【发布时间】：2014-02-19 02:46:10
【问题描述】：

我的图像在 chrome 和 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;
}

【问题讨论】：

如果有一些差异的截图会很棒。
@Matt 一个好的、独立的 SO 问题将包括屏幕截图。
@admdrew 有道理，但我在许多与 CSS 相关的帖子中看到了指向 jsfiddle 的链接（没有屏幕截图）
@Vallentin 帮助或不帮助，但对我来说，当“专家”抱怨有人努力提供很多细节的问题时，这很烦人。也许只有我一个人不会打扰这里的其他人。
@Matt 我同意，我不介意有人建议我提供屏幕截图，并且 admdrew 对自包含问题提出了观点。只是进来而不对实际问题做出任何贡献有点烦人。特别是如果页面上已经有足够的信息可以做到这一点。

标签： html css

【解决方案1】：

在 Firefox 中，我将 max-height 更改为 height，它的工作原理与 Chrome 相同...第一个将 height 设置为 300px 的就是成功了。

更新... 去掉 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;
}

【讨论】：

谢谢，但对于小于 300 像素的图像，我需要“最大高度”。
您仍然可以拥有最大高度，但如果您希望它显示图像的实际高度（与 chrome 相同），则必须包含 height 属性。 w3schools.com/cssref/pr_dim_max-height.asp max-height OVERRIDES height.
我在这里找到了这个帖子，看起来它对你也有用。试着在你的 CSS 中设置 body 高度：stackoverflow.com/questions/3925879/…
F12 在 Firefox 中打开开发者工具，问题在于外部容器（红色图像）。同样，当我在 DOM Inspector 中为 div#bigImgCon css 类选中/取消选中 max-height 时，它会改变一些事情。我正在继续尝试其中的 CSS……如果我弄清楚它的动态特性，我会告诉你的。要验证的一件事是哪个浏览器实际上是正确的。看起来 Firefox 尊重最大高度，Chrome 没有。
@UzmakiDev 去掉 div#bgImgCon 的最大高度并将其放在 div#imageContent 类上。在我看来，这对你有用。