Internet Explorer (Windows) CSSバグリスト

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

• 2003-11-06修正。症状と補足を変更。
• 2003-12-25修正。補足に回避法を追加。
• 2004-03-03修正。[3-882]の記述を加え、内容を整理。

症状

リストアイテム要素の内容物の末端にブロックボックスを生成する設定（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要素はブロックボックスを生成します。

スクリーンショット

補足

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

• リストアイテム要素の内容物の末尾を、 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の標準モードと互換モードで不具合の発生を確認しました。