東方イラスト・東方壁紙 霧島製作所 blog

◆CSS


IE7、IE8などでは大丈夫なのですが、IE6では起こる現象。
liリストの下に微妙な空白が空きます。
IE6はliの要素をdisplay:block;などに指定した場合、
line-hightの解釈がバグる仕様なのです。
IE6のリストに余白ができる現象
<ul>
<li><a href=”#”>リスト</a></li>
<li><a href=”#”>リスト</a></li>
<li><a href=”#”>リスト</a></li>
</ul/>

対応策としては、

1. liタグにline-hight:0;

解釈がおかしくなってるので、liのline-hightをリセットしてあげる事で空白を消します。

3. liにvertical-align:bottom;

ボタンが背景画像の場合。

3. liあるいはulにfont-size:1px;

私の場合だと1と3を多く使用しますね。
vertical-alignはいつもあまり使わないので馴染みがないのです。
備考
「未だにIE6を使ってる人なんているのかな?IE7とかで表示されてるなら別にいいじゃない」
と思いがちですが、ウェブに詳しくない人の中には未だにIE6を使い続けている人もいるので、やはりIE6に対応したCSSは必須です。
一応web関連のお仕事してるので、こういう記事もたまに載せていきたいと思います。

萃香WEB拍手


ニコニコ動画kirishimaページ 霧島製作所 RSS kirishima twitter at 18:31 |PermalinkComments(0)TrackBackCSS