IEではimgを含むインラインでlihe-heightが効かない

CSS

久しぶりに使い慣れたCSSプロパティで引っかかったのでメモ。
内容はタイトルの通り。例えばこんな感じ。

サンプル

Windows Internet Explorer （ウィンドウズ インターネット エクスプローラー）とはマイクロソフトが開発するウェブブラウザである。以前の名称は Microsoft Internet Explorer であった。一般的に、MSIE や IE という名称で指される。

コード

<p style="line-height:3">Windows Internet Explorer （ウィンドウズ インターネット エクスプローラー）とはマイクロソフトが開発するウェブブラウザである。<img src="http://img.f.hatena.ne.jp/images/fotolife/c/commom/20100308/20100308232408.jpg">以前の名称は Microsoft Internet Explorer  であった。一般的に、MSIE や IE という名称で指される。</p>

現象

WindowsのIEで見ると、CSSで"line-height:3"を指定しているにも関わらず行間がつぶれてしまっているのが確認できます。

対策

こちらに詳しくありました。

IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる｜CSS HappyLife
ハックかけて、インラインにまぎれたimgにパディングをつけましょう、とのこと。こんな仕様にだれがした。