行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。
line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。


サンプル:

行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。はぁと行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。


そこで、何点か自分なりに対処法を考えたので、メモっときます。

1)リストや見出しなどで二行にならない場合は、

li { 
 line-height:100%; 
 margin:10px 0; 
}

とする事で回避可能です。


2)p要素内や複数行になる場合(上記のサンプルのような)は、

p img { 
 padding:1em 0; 
 vertical-align:middle; 
} 
p > img { 
 padding:0; 
}

line-heightの指定値にあわせ、paddingで調整する事である程度揃える事が可能です。

また、IE以外の正常に解釈してくれるブラウザでは当然padding分が増えてしまうので、各種ハックなどで対処する必要があります。


もっと素敵な方法をご存知の方、教えていただけると助かります。