リストタグ、ブラウザ間の隙間の違いについて

質問

html、cssの質問です。
<dl>
<dt>---</dt>
<dd>----</dd>
<dd>----</dd>
</dl>

でメニューを作っています。
「---」の部分にはテキストを入れ込み、ブロック表示でテキストを飛ばし
背景に画像を表示させています。

サーバーにあげて仕上がりをみると、IE6とFirefoxで<dd>の隙間が異なり
見え方が微妙にかわってしまいます。
至る所にマージン0などを適応させましたが効果がありません。
どなたかハックなどの解決方法をご存知でしょうか。

ちなみに<dl><dd>の代わりに<ul><li>を使用しても
同じ結果でした。

回答No.1

abril · ベストアンサー

> ブロック表示でテキストを飛ばし

という言い回しが聞き慣れないので、いまいち実際のイメージがつかめませんが、隙間、というキーワードだけに着目すればmargin/padding/line-heightあたりのプロパティが怪しいですね。「至る所にマージン0などを適応させましたが効果がありません」とのことですが、他の2つの値と継承状態はどうなっていますか？特に、line-heightの影響が忘れられがちですので、そこは調整されましたでしょうか？もしも、該当の<dt>と<dd>内に実際に表示させたい要素が画像だけならば、line-heightの値を"0"にする（CSS文法チェッカーにかけるとNGなのですが…やむを得ず使用する場合も）ことで隙間をなくせたりします。後はHTML側の改行コードの解釈もありますので、タグとタグの間の改行コードを削除するなりコメントタグで改行コード部分を隠すなりしてみると、結果が変わる事があります。

こういった方法を試してみて解決しない様であれば、それ以上のことは実際の HTML とCSSのある程度のソースを見なければわからないですね。

> ハックなどの解決方法
おそらく、hackを使用するまでもないかと思います。ソースがわからないので断定はしませんが。

回答No.3

神崎 渉瑠（@taloo）

list-style-position:inside/outside;
も、IEとFirefoxで違う値がデフォルトになっています。

回答No.2

SAYKA

>至る所にマージン0
リスト関係はpaddingじゃなかったっけ？
ブラウザによって　どっちでどうって　挙動が微妙に違うみたいだからなんともいえないけど。