2009年4月 7日

リストで隙間が出るバグ

職場からのブログ更新は基本的にしないんだけど、昨日の夕方から悶々と悩んでいた件がようやく解決したので備忘録。
Firefoxでは問題なく正常に表示される・・・ってことで、もしかしてもしかしなくても、やはり恒例のIEのバグでした(´・ω・`)

リストタグを使って縦メニューを作ると、IE(たぶん6以前。7以降は大丈夫のはず)だけliの上下に変な余白が入ってしまうバグ。
どうやら、リスト内のaタグとかを、display:block;でブロック化してしまうと起こる不具合みたいで・・・。
margin:0px;と指定したりしても全く直らないのですが、

liタグに line-height:0;
liの中のaタグに line-height:normal;

を指定すると、すっきり解決します。

時間ロスしたけど、おかげでスッキリ。
気を取り直して、午後からのお仕事も頑張りますよー!

参考:
【CSS】IE6 リストで隙間が出るバグ
リストタグを使用時のIEでの変な隙間を消す

ありがとうございました(*´∀`*)