html - Firefox 在没有设置宽度/高度的情况下不遵守父级的最大宽度/高度

Question

我遇到了一个奇怪的问题，在 Chrome/Safari 中，图像遵循父级内部的最大宽度/高度样式，没有设置宽度/高度。但在 Firefox/Opera 中没有。

<div id="container">
    <figure>
        <img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg">
    </figure>
</div>

这就是图像和容器。 CSS如下:

body {
    width: 100%;
    height: 100%;
}
#container {
    width: 90%;
    height: 90%;
    margin: auto;
}
figure {
    position: relative;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    line-height: 0;
}
img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

figure 元素仅用于通过使用 :before 选择器作为图像的叠加层，但如果它具有设置的宽度则不起作用/高度。有没有办法让 Firefox 和 Opera 尊重祖 parent 的高度/宽度？​​

JSFiddle:http://jsfiddle.net/GUrkj/1/

Answer 1

参见 here on MDN

具体来说:

The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

还有……

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.

最后一部分的意思是，至少在 Firefox 中，没有明确说明的 height 值，max-height 变为 none -导致观察行为。

因此，您至少需要将 height 和 width 添加到 figure 元素。