再び定義リストdt ddを横並びで表示させる

定義リストの横並びで苦戦したので再びエントリーしておきます。以前のエントリーは1つのdtに対して複数のddを記述すると最初のddがずれると言うものでしたが、ddが折り返された時はずれたままでしたが、今回は折り返されてもずれないようにCSSを調整して行きます。

まず次のような(X)HTMLがあります。

<dl>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dd class="test">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>

この(X)HTMLを次のようなCSSで整形します。

dt {
	width: 7em;
	float: left;
	clear: left;
	line-height: 1.3;
}
dd {
	margin-bottom: 0.3em;
	margin-left: 7em;
	line-height: 1.3;
}
dd p { margin-bottom: 0.3em; }

するとWindows IE6では左のようにdtの直後に出現するddの先頭の文字が右に0.3emほどずれて表示されてしまいます。

これを回避するにはIE6用にheight: 1%;を適用させると頭文字がそろいます。IE6だけに適用させるため* htmlハックでCSSを記述します。

* html dd { height: 1%; }

さてとりあえずそろいましたが、height: 1%;の記述は右に0.3emほどずれたものに合わせることになるので、1つのdtに複数のddを記述した場合、2番目以降のddは正しいddの位置に表示されるので、当然のようにずれてしまいます。

結局これを回避するためには2番目以降のddに同じく* htmlハックで右に0.3emほどマージンを多くとる事になってしまいます。

正確なマークアップの意味合いから外れてしまうかもしれませんが、1つのdtに対してddを1つにし、dd内にpタグを含めてマークアップすると、クラスを作らなくても右に0.3em分ずれて表示してくれるので、とりあえず見た目の確保は出来ます。

<dl>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>