Internet Explorer不支持max-width或max-height属性

Question

3

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

- IAmYourFaja

2个回答

4

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

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

- Gabriele Petrioli

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

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

- CWSpear · Accepted Answer

确保您已声明文档类型，并且在其之前没有任何输出或空格。例如，这是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 会导致最大宽度无法工作。兼容模式似乎对此问题没有影响。