我在使 max-height: 100% 在 IE 10(IE 9 也是)中工作时遇到问题。
我在 StackOverflow 中发现了几个问题，但没有一个适用于我的情况。 (很多都是在处理固定大小的包装器)。
我正在以动态模式显示图像。
我想限制最大尺寸不要溢出可见窗口区域。
所以，我没有任何 height: xxxpx 因为我不想拉伸(stretch)小图像。
我也不会将 wrapper div 设置为 height: 100%，因为我希望它根据图像大小进行调整。
这里是问题的一个小演示:
<!DOCTYPE html>
...
<div id="thumbnail-container">
<img src="http://www.universetoday.com/wp-content/uploads/2008/09/sun_stereo_4dec2006_lrg.jpg"/>
</div>
CSS
#thumbnail-container img {
max-height: 100%;
}
它在 Chrome 中有效，但在 IE 中无效。 max-width 工作正常。
如何在不使用 Javascript 的情况下完成这项工作？
最佳答案
像 min-height 和 max-height 这样的属性，当与百分比一起使用时，将应用该百分比作为父容器的百分比 .现在，您没有父容器，所以这是个问题。
此外，如果父容器没有将高度设置为明确的值，则使用带有百分比的 max-height 也同样不起作用。
因此，要在某处使用 max-height: 100%;，您还必须将该元素的父容器的高度设置为明确的值(即 50px)。 parent 设置为 50% 将不起作用，因为 50% 不是明确的；它是相对的)。
关于html - 最大高度在 Internet Explorer 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22966078/