ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る

症状

リストアイテム要素の内容物の末端にブロックボックスを生成する設定(display:block;)にしたインライン要素を置くと、リストアイテム要素のボックスの直後に空行が発生する。。

例示

<ul>
<li><span style="display:block; margin:0; background:yellow;">
ブロック</span></li>
<li><span style="display:block; margin:0; background:yellow;">
ブロック</span></li>
</ul>

li要素の内部にあるspan要素はブロックボックスを生成します。

スクリーンショット

Ns7.1Netscape7.1標準モード

WinIE6.0WinIE6.0標準モード

補足

以下に不具合を回避する方法を挙げます。

  • リストアイテム要素の内容物の末尾を、 display:block; を指定した要素にしない。
    <ul>
    <li><span style="display:block;">ブロック</span>
    インライン</li>
    <li><span style="display:block;">ブロック</span>
    インライン</li>
    </ul>
    • ブロックインライン
    • ブロックインライン
  • リストアイテム要素または display:block; を指定した要素のwidthプロパティやheightプロパティを明示する(WinIEバグ070に注意)。
    <ul>
    <li style="width:80%;"><span style="display:block;">
    ブロック</span></li>
    <li style="width:80%;"><span style="display:block;">
    ブロック</span></li>
    </ul>
    • ブロック
    • ブロック
  • リストアイテム要素の終了タグの直前や直後で改行しない。
    <ul>
    <li><span style="display:block; background:yellow;">ブロック</span></li><li>
    <span style="display:block; background:yellow;">ブロック</span></li></ul>
    • ブロック
    • ブロック
  • リストアイテム要素にボーダーまたはパディングを設置する。
    <ul>
    <li style="padding:1px;"><span style="display:block;">
    ブロック</span></li>
    <li style="border:1px solid blue;"><span style="display:block;">
    ブロック</span></li>
    </ul>
    • ブロック
    • ブロック

修正状況

WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。

スポンサーリンク

関連記事

スポンサーリンク

ブラウザの一覧

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

上に戻る