百分比最大高度在Firefox

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%; 
} 

看到它的jsfiddle在火狐

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

我需要.article設置爲height：100％圖像在Firefox萎縮

有人可以解釋如何理解Firefox的比例最大高度和它的容器？

在此先感謝！

Answer 1

它瞭解它的方式the W3C specifications state。要使max-height正常工作，除內容本身之外的其他內容需要明確設置其包含元素的height。這就是爲什麼當你設置height: 100%它的作品，因爲現在你明確告訴.article從其父（而不是其內容）取其height。但是當您將.article設置爲max-height時，它仍然是驅動其計算的內容height，僅限於未超過.containerheight。在你的情況下，內容是img本身。

In this fiddle，你可以看到.article實際上是在限制自己的.container的height，但允許本身（img）的內容溢出到更高的高度。該img不受其max-height因爲.article沒有一個明確的height集約束，但實際上從img得到其高度（僅是有限的，它不能走過去的容器height）。