删除 IE9 在 <img> 周围创建的神秘 space

Question

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

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

想不通怎么了，这张图片只向左浮动了...

更新：哇，我好像发现了什么：IE9 使图像的高度适合容器的高度，但不知何故使实际宽度等于图像的原始宽度。但仍然保持图像的纵横比。

新问题：如何强制 IE9 使 img 在保持宽高比且不使用魔法的情况下适应容器

Answer 1

改变这个：

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

为此：

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

修复它，因为在这种情况下 100% 被视为自动。在这种情况下，自动是原始图像的大小：而不是容器的大小。从那里，IE 认为它也有那个宽度，并且因为容器调整宽度而不是长度，所以显示 'padding'。

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

Remove mysterious space that IE9 creates around <img>