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 agiven element. It prevents the used value of the height property frombecoming larger than the value specified for max-height.

还有……

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

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

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