css - 无法让 Firefox 或 IE 遵守最大高度，而 Chrome 和 Safari 可以

Question

我意识到有人问过类似的问题。我已经研究了所有这些，但仍然没有找到适合我的具体情况的解决方法。

请查看此调试页面:

[删除]

如果您在 Chrome 或 Safari 中打开此页面，您会注意到以下行为:

• 水平调整浏览器窗口大小时，图像的宽度会增大和缩小，但最大高度为浏览器窗口的 100%。
• 垂直调整浏览器窗口大小时，高度会强制为 100%，宽度可能会根据图像的纵横比缩小或增大，直至达到某个最大值。

以上是我想要跨浏览器传递的期望行为。但是，我无法让它在 Firefox 和 IE (10) 中正常工作。似乎 max-height 属性没有得到尊重。结果是在更宽的视口(viewport)上，图像的高度大于浏览器窗口，并且被截断了。

我在这个页面上的伪html结构如下:

html -> body -> image-container -> image-wrapper -> img

img 元素没有明确的内联宽度或高度设置，我在 CSS 中控制它:

#image-container img.tall {
display:block; 
max-height:100%; 
width:auto; 
max-width:100%;
}

我从其他问题上看到，img元素的所有父元素(如html、body)都需要设置为height:100%；我的实现是这样，但 max-height 似乎仍然没有得到尊重，而且这个问题只出现在 Firefox 和 IE 中。

注意:我在所有元素上使用了 box-sizing:border-box。

Answer 1

愚蠢的我，虽然我确实在 html 和 body 上设置了 height:100%，但我没有在#image-wrapper 上设置它。那里我只有 max-height:100%。