Internet Explorer 10忽略图像的宽度和高度

Question

我有一个网站,其中Internet Explorer 10完全忽略显式设置的宽度和高度属性,而不是实际的图像大小.

图像定义为:

<img style="float: left; margin: 0px 10px 0px 0px; display: inline;" 
     align="left" src="http://blog.hinshelwood.com/files/2012/09/metro-findings.png"
     width="64" 
     height="64"/>

但它在IE10中呈现为128x128.在Chrome中,它就像您期望的那样.

例如http://blog.hinshelwood.com/tfs-integration-tools-issue-tfs-wit-invalid-submission-conflict-type/

在此页面上,"适用于","解决方案"和"查找"图像都设置为64x64,但在IE10中它们显示为128x128.我尝试过设置以下CSS,但这也被忽略了:

h3 img {
 width: 64px;
 height: 64px;
}

有没有人有任何想法？

Answer 1

你有

body .content img {
  max-width: 100%;
  height: auto;
  width: auto \9;
}

http://blog.hinshelwood.com/wp-content/themes/pagelines/pagelines-compiled-css-2_1348178943/

在IE中,无效width: auto \9;被解释为width: auto;

在Chrome中,忽略无效宽度.

没有宽度自动,图像的行为是不同的:

在Chrome中,宽度现在来自h3 IMG { width: 64px; },并且由于高度为自动,因此图像将根据64px进行缩放.

在IE中,宽度和高度仍然是"自动",因此它采用默认的IMG大小.

CSS样式会覆盖IMG标记属性:您可以尝试使用内联样式来覆盖继承的样式.

<img style="height: 64px; width: 64px;" src="..." />