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

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

View 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>

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

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

追記

Firefox 10(や12)でも発生してた。Chrome 17とOpera 11は発生しない。バグじゃない可能性もありそうなのでもうちょっと調べてみる。

a要素などの間に挟まっている要素をdisplay: blockとするともちろん回避できるんだけど、a要素の場合は余白の部分までリンクになってしまう(クリックできてしまう)ようになるのでちょっと問題ある。