javascript - Internet Explorer 不支持最大宽度或最大高度

Question

我正在尝试使用 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 都遵守这些最大约束？提前致谢！

score 6 · Accepted Answer

确保您已经声明了一个 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 不起作用。兼容模式似乎没有影响它（在这个问题上）。

score 4 · Accepted Answer

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

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

2 回答 2