ul,liをblock指定した時、IE7でズレるのはline-heightだけじゃないっぽい。

またしても覚書。

表題の通り、ulとliのmarginやpaddingを0にしてdisplay:blockにして、liの子要素に画像を使ったナビゲーションを作ったんだけど、IE7だけズレる。IE6とIE8はズレないだけに余計に不可思議。

で、調べてみたところ、こちらでline-heightが悪さをしている、という記事を発見。
http://redline.hippy.jp/lab/css/ie_1.php

これでめでたく解消した部分もあったんだけど、最後までline-heightだけではどうにもならない箇所があった。

結果的には解消したんだけど、top:0pxとしてみたり、background-positionを0にしてみたり、挙句要素そのもの(li)にも背景の画像を入れてみたりと、急ぎでいろいろやったので正直どれが効いたのか未だわからず…
今度似たケースが出てきたら詳しく検証してみたい。
IE対応はほんとに骨が折れますね。

コメント

人気の投稿