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
するのを止めて、擬似要素でリストのブレットらしき文字列を挿入するとかもある。
追記
Firefox 10(や12)でも発生してた。Chrome 17とOpera 11は発生しない。バグじゃない可能性もありそうなのでもうちょっと調べてみる。
a
要素などの間に挟まっている要素をdisplay: block
とするともちろん回避できるんだけど、a
要素の場合は余白の部分までリンクになってしまう(クリックできてしまう)ようになるのでちょっと問題ある。