[CSS]fieldsetにbackground指定するとIEではみ出す

fieldsetにbackground指定(color等)をしたとき、IEだけ上方向にはみ出して表示される。
原因はlegendにまで背景が適用されてしまうため。これはIEのバグらしい。

IEだけ背景なしにしてもよいが、そういうわけにもいかんという場合は、以下の方法で修正が可能。

IE apparently does this because the legend is contained within the fieldset, and IE tends to dislike when things extend out of their containers, as evidenced by its many bugs in this area (e.g., its auto expansion of height, auto containment of floats, refusal to display negatively margined pieces of content that leave the bounds of their containers, etc.).

The IE Fieldset Background Color Bleed Bug (2008-03-12)

色々書いてあるが簡単に3行くらいでまとめると

  1. fieldsetにposition:relative;
  2. legendにposition:absolute
  3. legendにはみ出る分量程度マイナスを設定(top:-1em等)

以上で解決。

このバグはIE7でも出てるので、* htmlハックが使えない。
また、Operaでおかしなことになるので、
IE7以下全てのIEのみ適用するアスタリスクハック(*position:absolute;)を使うか、

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください