ulでの段組の際の隙間

質問

お世話になります。

現在CSSで段組を行っているのですが、リスト（ul）で画像を縦に並べてメニューを作成しようと思っています。
liにはheightやmarginやpaddingなどをきちんと隙間なく並べるように書いて、imgにはvertical-align:bottom;を設定しています。
それでも、IE6.0で見たときどうしても1pxの隙間ができてしまうのです。

どうしてだろうと思い、画像の高さが25pxのものを作成し、liのheightに25pxを設定して（他は上記のCSSでいじらずに）表示すると、きちんと隙間ができずに表示されました。

隙間ができてしまうときのメニュー画像は高さ15pxのものを使用していて、liのheightを15pxと設定していました。

今までCSSで組んだときはきちんと隙間があくことなく表示できたのですが、今回だけどうしても隙間があいてしまいます。

メニューのリストで、使用する画像は小さいときは隙間があいてしまう、というようなバグがIEにあるのでしょうか。
もしそれがバグの場合は一言お教えいただけないでしょうか。
解決方法がなければしょうがないのでテーブルを使用しようと思います。

どうぞよろしくお願いいたします。

回答No.1

partita · ベストアンサー

いろいろliに適用してみてください。

li {
font-size:1px;
line-height:0;
text-decoration:none;
}

どれかがマッチするはず。

お礼

大変遅くなりましたが、ご回答ありがとうございました。
試してみたら、見事ビンゴでした。
どれを設定すればできるのかな…とこの3種類をいろいろな組み合わせで試してみましたが、3つ指定するときっちりメニューをくっつけることができました。
本当にありがとうございました！！

回答No.2

noname#19206

画像の大きさが関係しているのではなく、画像を使っているから隙間が開くんだと思います。
たぶん仕様じゃないかな…？文字と画像を普通に並べても画像のほうが若干高い位置に表示されるし…。

それと、リストで CSS を組む場合は注意が必要です。
IE,Opera と Gecko で認識状態が異なります。
http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

お礼

大変遅くなりましたが、問題を解決することができました！
ご回答ありがとうございます。
また、それぞれのブラウザによって認識が違うというのは本当に面倒ですよね…；
お教えいただいたURLを拝見してもっと勉強しようと思います。
ありがとうございました！