li要素の子孫にリスト要素があるとリストマークが上方にずれる

症状

li要素の子孫にdl要素リスト要素（ul, ol, dl）を置くと、li要素につくリストマークが上方にずれて表示される。また、この状態のli要素に上ボーダーを設定するとリストマークが消える。また、最初のli要素のリストマークも消える。

例示

<ul>
<li><dl>
<dt>Win95</dt><dd>1995年</dd>
</dl></li>
<li><dl>
<dt>Win98</dt><dd>1998年</dd>
</dl></li>
<li style="border:1px solid blue;"><dl>
<dt>WinMe</dt><dd>2000年</dd>
</dl></li>
</ul>

3番目のリストアイテムはボーダーが設定されています。

スクリーンショット

Moz1.0Moz1.0での表示（標準モード）

WinIE6.0WinIE6.0での表示（標準モード）

補足

最初のリストアイテムのリストマーカーが消える現象は、以下のいずれかの方法で回避できます。

  • dl要素リスト要素をブロックレベル要素で括る。 
    <ul>
<li><div><dl>
<dt>Win95</dt><dd>1995年</dd>
</dl></div></li>
</ul>
  • dl要素リスト要素の前後に何らかの文字を置く。コメントでもよい。（少なくともli要素開始タグとdl要素リスト要素開始タグの間に何らかの文字があればバグを回避できます） 
    <ul>
<li><!-- コメント --><dl>
<dt>Win95</dt><dd>1995年</dd>
</dl></li>
</ul>

修正状況

WinIE6.0では標準・互換モード問わずバグが発生しています。

関連記事

スポンサーリンク

VMware Serverのファイル・サービス

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る