删除IE9创造的神秘空间<img>

Question

我正在尝试学习如何制作跨浏览器页面并停留在处理IE9上：它在<img>附近创建了一些空间，请参见示例

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

无法想象出什么问题，此图像仅浮动到左侧...

更新：哇，好像我已经知道发生了什么：IE9使图像的高度适合容器的高度，但是以某种方式使实际宽度等于图像的原始宽度。 但仍保持图像的纵横比。

新问题：如何强制IE9使img适合容器并保持宽高比且无魔法

Answer 1

改变这个：

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

对此：

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

解决此问题，因为在这种情况下将100％视为自动。 在这种情况下，“自动”是原始图像的大小：不是容器的大小。 IE认为从那里开始也具有该宽度，并且由于容器在宽度方向而不是长度方向调整了大小，因此显示了“填充”。

另一方面，继承会调整图像的大小以适合容器，同时保持原始图像的纵横比。