在Internet Explorer中，最大高度（max-height）无效

Question

在Internet Explorer中，最大高度（max-height）无效

3

我在使用IE 10 (或者IE 9)时，无法使 max-height: 100% 生效。

我在StackOverflow上找到了一些相关的问题，但是它们都不适用于我的情况（大多数是处理固定大小的包装器）。

我在模态框中动态展示图像。
我想限制最大尺寸以避免超出可见窗口区域。
因此，我没有任何 height: xxxpx ，因为我不想让小图像被拉伸。
我也不会将包装器 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%;
}

在fiddle中查看演示

它可以在Chrome中运行，但无法在IE中运行。 max-width 正常工作。

我该如何使其正常工作，而不使用Javascript？

- Andre Figueiredo

1

无法在IE8中正确查看JSFiddle。：\ - Mohammed Joraid

2个回答

0

max-height属性在IE7+中有效，但仅当页面具有标准的DOCTYPE时才有效。尝试声明文档的DOCTYPE。尝试使用以下其中之一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<!DOCTYPE html>

此外，如果IE处于兼容模式下，可能会导致问题。请尝试将以下内容添加到您的文档<head>中：

<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

- Karim AG

我正在使用 <!DOCTYPE html>。 - Andre Figueiredo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TylerH · Accepted Answer

< p > 当使用 < code >min-height 和 < code >max-height 属性与百分比一起使用时，它会将该百分比作为父容器的百分比应用。目前，您没有父容器，这是个问题。

此外，如果父容器没有设置明确的高度值，则使用 max-height 与百分比也不起作用。

因此，要在某处使用 max-height: 100%;，您还必须将该元素的父容器的高度设置为明确的值（例如 50px）。拥有父级设置为50％是无效的，因为50％不是明确的；它是相对的。