制作ブログ Web制作マークアップCSSline-heightとimgによるWinIEバグ

line-heightとimgによるWinIEバグ

line-heightを指定してる中にimgが含まれると、WinIE(IE7では修正されている)では行間が狭くなる。

<ul>
<li>テキストテキスト</li>
<li>テキストテキスト<img /></li>
<li>テキストテキスト</li>
</ul>

こうした状況に対応させるため、li要素、またはimg要素にIE6以下で適用されるハックを利用させる。

サンプル1
li{
_margin-top:任意の値
_margin-bottom:任意の値
}
サンプル2
img{
_margin-top:任意の値
_margin-bottom:任意の値
}

インライン要素にpaddingを設定してしまうと、IE5など一部で適用されない。そこで、marginを設定したほうがよい。

また、このハックはCSSの仕様に準拠していないので、Validにこだわるならおすすめしない。