火狐浏览器忽略图像的百分比最大高度。

Question

HTML:

<div class="container">
    <article class="article">
        <img class="article-img" src="bordeaux.jpg" />
    </article>
</div>

CSS：

.container{
    width:500px;
    height:200px;
}
.article{
    max-height:100%;
}
.article-img{
    max-height:100%;
}

在Firefox中查看它的jsfiddle

http://jsfiddle.net/UETMr/4/

我需要将.article设置为height:100%，使图像在Firefox中缩小

有人能解释一下Firefox如何理解百分比max-height及其容器吗？

提前感谢！

- Ray Tsai

Answer 1

它按照W3C规范的方式理解。对于max-height生效，需要有其他东西显式地设置其包含元素的height，而不是内容本身。这就是为什么当您设置height:100％时，它会起作用，因为现在您明确告诉.article从其父级获取height（而不是其内容）。但是，当您将.article设置为max-height时，仍然是内容驱动其计算出的height，只是限制不超过.container的height。在您的情况下，内容就是img本身。

在这个代码片段中, 你可以看到.article实际上将自己限制在.container的height内，但允许其内容（img）溢出到更大的高度。 img没有受到max-height的限制，因为.article没有设置显式的height，而是从img获取其高度（只限于不能超过其容器的height）。

- ScottS

---

谢谢你的详细解释，太感谢了！现在我明白了！ - Ray Tsai