Internet Explorer 不支持最大宽度或最大高度答案

【问题标题】：Internet Explorer not honoring max-width or max-heightInternet Explorer 不支持最大宽度或最大高度
【发布时间】：2012-04-23 19:22:03
【问题描述】：

我正在尝试使用 CSS 将图像缩放到精确值：

HTML：

<div id="thumbnail-container">
    <img src="sample-pic.jpg"/>
</div>

CSS：

#thumbnail-container img {
    max-height: 230px;
    max-width: 200px;
}

在本例中，sample-pic.jpg 实际上是 320x211。

在 Firefox 11.0 中，此代码运行良好，FF 将 sample-pic.jpg 的大小调整为 CSS 规则中规定的最大 230x211 限制。

然而，在 IE 9 中，max-height 和 max-width 规则被完全忽略，图像以其通常的 320x211 大小呈现。

如何修改 HTML/CSS 以使 IE 9 和 FF 11.0 都遵守这些最大限制？提前致谢！

【问题讨论】：

【解决方案1】：

确保您已经声明了一个 doctype，并且在它之前没有输出或空格。例如，这是 HTML5 的 doctype，它应该放在输出的最顶部：

<!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" />

编辑：我能够测试，似乎没有doctype 确实导致 max-width 不起作用。兼容模式似乎没有影响它（在这个问题上）。

【讨论】：

【解决方案2】：

IE7+ 支持max-width 和max-height。

检查您的页面是否在标准模式下运行..（确保存在有效的文档类型）

【讨论】：