アプリ版:「スタンプのみでお礼する」機能のリリースについて

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

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

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

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

A 回答 (3件)

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



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

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

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

list-style-position:inside/outside;


も、IEとFirefoxで違う値がデフォルトになっています。
    • good
    • 0

>至る所にマージン0


リスト関係はpaddingじゃなかったっけ?
ブラウザによって どっちでどうって 挙動が微妙に違うみたいだからなんともいえないけど。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!