删除IE9围绕<img/>创建的神秘空间

Question

我试图学习如何制作跨浏览器页面并坚持处理IE9：它在<img>附近创建了一些空间，请参阅example

看最右边的图像，它应该出现在这里。 如果没有出现空格，请将鼠标悬停在图像上。

无法想象有什么不对，这张图片只是飘到了左边......

更新：哇，似乎我发现了最新情况：IE9使图像的高度适合容器的高度，但不知何故使实际宽度等于图像的原始宽度。但仍然保持图像的宽高比。

新问题：如何强制IE9使img适合容器，保持纵横比并且没有魔法

Answer 1

更改此内容：

.header * {
  float: left;
  height: 100%;
}

对此：

.header * {
  float: left;
  height: inherit;
}

修复此问题，因为100％在此方案中被视为自动。在这种情况下，自动是原始图像的大小：不是容器的大小。从那里开始，IE认为它也具有这样的宽度，并且因为容器调整了宽度方式而不是长度方式，因此填充＆＃39;显示。

另一方面，

继承，调整图像大小以适合容器，保持原始图像的宽高比。