リストタグを使用した際にIEで生じる隙間を消す｜web bibo

リストタグを使用してメニューを作ることは良くあると思いますが、この時にIEだけに変な隙間が入る事があります。Firefox、Safari等で見るとちゃんと隙間なく詰まってるのに。。。またIE様のバグですかぁ。と憤る方もいると思います。 これはmarginやpaddingの問題でなく、IEではリスト内のインライン要素をブロック化した場合、line-heightの解釈がおかしくなるみたいです。 →メニューの間に隙間ができるサンプル 解決策は以下のとおり。 HTMLコード <ul> <li><a href="#">メニュー01</a></li> <li><a href="#">メニュー02</a></li> <li><a href="#">メニュー03</a></li> </ul> CSSコード ul { list-style-type: none; width: 300px; }

[xiuxing]

はまったのでブクマしとく

[tooosh]

IEのli内でブロック要素を使うと隙間が空く→divで作成