スタイルシートをめぐる冒険: マージンを使ってdtとddを横並びにするとdtが消える

定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。 [該当するブラウザ] Windows／IE7.0以下 症状 たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする（右図）。 角マル矩形は、 frame_top.gif（トップの部分）、 frame_bg.gif（中間部分）、 frame_btm.gif（ボトムの部分）、 以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである（→サンプルページ1）。 【スタイルシート】 body { margin: 10px; padding: 0; } .box { w

[chips1029]

dt,ddの横並び時にdtが消える

[vv_boow_vv]

対処法は、やはり、マージンの調整による横並びレイアウトは使わないこと、これに尽きる。