スタイルシートをめぐる冒険

CSSトラブルシューティング / 定義リスト関連

dlを含むボックスに背景画像を指定すると背景画像が繰り返される

この現象は、あるWebページで、※1～、※2～、※3～というような「脚注」にdlタグを使用したときに発生した。
本文と脚注を区切る罫線として、脚注を含むボックスの上部に、二重破線の背景画像（line.gif をx軸にリピート）を指定。ddにマイナスのmargin-topを指定して、dtとddが横に並ぶレイアウトにしたところ、一番上にだけ入るべき罫線が<dt></dt><dd></dd>のセットごとに入ってしまったのである。
[該当するブラウザ]
Windows／IE7.0（互換モードのとき）、IE6.0以下

症状

実際にどういうことか、右のスクリーンショットを見ていただこう。これは、IE7.0で表示させたときのものである。

そして、スタイルシートとHTMLは以下のように記述されている。（→サンプルページ1）

【スタイルシート】

body { line-height: 1.5em; }
.box { background: url(line.gif) repeat-x top; }
dl { line-height: 1.7em; }
dd {
    margin-left: 3em;
    margin-top: -1.7em;
}

【HTML】

<div class="box">

<dl>

<dt>※1</dt>

<dd>○○○○○○○○○○</dd>

<dt>※2</dt>

<dd>○○○○○○○○○○</dd>

<dt>※3</dt>

<dd>○○○○○○○○○○</dd>

</dl>

</div>

※DOCTYPE宣言なし

bodyへのline-heightの指定や、DOCTYPE宣言なしというあたりに首を傾げる方もおられるだろうが、実は、この現象が起きたWebページというのは某大手企業の巨大サイトの一部であり、この設定が「仕様」であったことをお断りしておく。

原因

IE7.0に限った場合、この現象は以下の3つの条件が重なると起きる。

DOCTYPE宣言なし
body、またはdlの上位のボックスにline-heightを指定
ddのmargin-topにマイナスの数値を指定

しかし、IE6.0以下では、1番目と2番目の条件を取り除いてもなお起きる現象であり、そもそもmarginを使った定義リストの横並びレイアウトとbackground-imageの相性がよくないようだ。ちなみに、dlに直接background-imageを指定しても、この現象は変わらない。

対策

今回のようなケースでは、IE6.0以下も考慮するなら、marginによる定義リストの横並びレイアウトは使わない、というのが唯一の解決策となるだろう。定義リストの横並びレイアウトを実現する方法はいろいろあるようだが、ここではfloatを使った方法を挙げておく。（→サンプルページ2）

【スタイルシート】

body { line-height: 1.5em; }
.box { background: url(line.gif) repeat-x top; }
dl { line-height: 1.7em; }
dt {
    float: left;
    width: 3em;
    clear: left;
}
dd { margin-left: 3em; }

【HTML】
変更なし

(last modified: 09/26/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/109