刪除IE9創造的神秘空間<img>

Question

我正在嘗試學習如何制作跨瀏覽器頁面並停留在處理IE9上：它在<img>附近創建了一些空間，請參見示例

看最右邊的圖像，它應該出現在這里。 如果沒有出現空格，請將鼠標懸停在圖像上。

無法想象出什么問題，此圖像僅浮動到左側...

更新：哇，好像我已經知道發生了什么：IE9使圖像的高度適合容器的高度，但是以某種方式使實際寬度等於圖像的原始寬度。 但仍保持圖像的縱橫比。

新問題：如何強制IE9使img適合容器並保持寬高比且無魔法

Answer 1

改變這個：

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

對此：

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

解決此問題，因為在這種情況下將100％視為自動。 在這種情況下，“自動”是原始圖像的大小：不是容器的大小。 IE認為從那里開始也具有該寬度，並且由於容器在寬度方向而不是長度方向調整了大小，因此顯示了“填充”。

另一方面，繼承會調整圖像的大小以適合容器，同時保持原始圖像的縱橫比。