2012-03-08

リストにした要素の子にブロックがあるとIE9で……

display: list-itemとした要素の中にブロックがあると要素の上に消すことのできない余白が現れることがあるというバグ問題で、IE9と書いたけど残念なことにIE10 PP4でも起こった。必ず起こるというわけではなくて、list-itemな要素とblockな要素の間にa要素などが挟まる場合という条件がある。marginやpaddingプロパティーを0にしてもこの謎の余白は消えない。

Demo: list-item, a element and block bug in IE9

デモのようにsection要素内全体をa要素で括っている場合にsection要素をlist-itemにすると起こりやすい……という風に書いてもほとんど説明になっていない。

<section class="news">
  <a href="/news?id=10">
    <h1>10th News!</h1>
    <p>This is a 10th news.</p>
  </a>
</section>
...
<section class="news">
  <a href="/news?id=1">
    <h1>1st News!</h1>
    <p>This is a 1st news.</p>
  </a>
</section>

こういった概要付きのニュースの羅列をカラム分けして並べるとかよくあるケースを想像するとわかりやすいかもしれない。これを狭い画面で読みやすいように概要は削除してタイトルのリストにしようかな……と思って、.newsをdisplay: list-itemとすると発生するということ。マージンの相殺絡みかなーとか思ったけどそういうわけでもなさそうで、かなり意味不明なバグ問題という感じ。

子のブロックをdisplay: inlineにするとなんとか消えてくれる。inline-blockだと行ボックスの上にはみ出すように配置されるので、リストのブレット位置が下寄せになってしまうのでアレ(vertical-alignで調節できるけど)。別解としてはdisplay: list-itemするのを止めて、擬似要素でリストのブレットらしき文字列を挿入するとかもある。