label要素の子要素に display プロパティを設定するとIEでカーソルが変わることがある

label要素を使うと、大抵のブラウザではマウスカーソルが default(矢印)になります。ところがIEのみ、子要素の display プロパティによっては text(I型)になることがあります[1]

たとえばこんなケースです。

<label><span style="display:inline-block;">ラベル</span></label>

CSS 2.1で定義(W3C)されている16の値のうち、noneなど表示されないものを除いた13種類でテストしてみたところ、以下の7つの場合にスタイルが変わりました。

  • block
  • list-item
  • inline-block
  • table
  • inline-table
  • table-cell
  • table-caption
  • なお、IE6, 7 は inline-block のみスタイルが変わるようです。

IEでも表示を統一したい場合は、スタイルシートで label { cursor: default; } と指定すればOKです。

脚注