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

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都遵守这些最大约束？提前致谢!

Answer 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 不引起最大宽度不工作.兼容模式似乎没有影响它(在这个问题上).