///

line-heightとimgによるWinIEバグ

wrote :

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にこだわるならおすすめしない。

川上 武範(かわかみ たけのり)
1975年生。シンプルシンプルデザイン代表兼Webクリエイター。たびのとWebサイト運営責任者。

企画からサイト設計、正しいマークアップを意識したWebサイト制作やユーザー視点の情報設計を得意としている。

シンプルシンプルデザイン
たびのと
twitter : たけたけ@OnlyTwo

メディア掲載
2016年10月25日 レバテックフリーランスの記事「自作Webサービス記事紹介まとめ」でサイト内の記事「Webサービス「たびのとTOKYO」を作ってみました」を紹介していただきました。