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;
}

有没有人有任何想法为什么呢？

- MrHinsh - Martin Hinshelwood

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中，无效的宽度被忽略。

如果没有width auto，则图像的行为会有所不同：

在Chrome中，宽度现在是从h3 IMG { width: 64px; }派生的，由于高度是自动的，因此根据64px进行了缩放。

在IE中，宽度和高度仍然是“auto”，因此采用默认的IMG大小。

CSS样式覆盖IMG标签属性：您可以尝试使用内联样式来覆盖继承的样式。

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

- John Liu

---

你正在使用内联属性而非内联样式。<img style="height:64px; width: 64px;" .../>而不是<img height=64 width=64 ... />在CSS出现之前，图像的属性来自早期的Web设计。但是，使用CSS样式可以覆盖传统的属性设置。 - John Liu

属性在技术上仍应该覆盖内联样式！所以 IE 没有遵循标准......这很有趣，因为这就是 Live Writer 设置宽度和高度的方式！ - MrHinsh - Martin Hinshelwood

我在"h3 img"中添加了"!Important"来修复它 :) - MrHinsh - Martin Hinshelwood

JohnLiu，@MrHinsh，我注意到WordPress使用属性（width=600 height=900）来处理图像，它们会覆盖Internet Explorer中的所有样式，包括IE11。这意味着当它们被WP自动生成时，max-width: 100%将无法起作用，这是令人遗憾的。 - bafromca