IE6のinputタグ表示バグを防ぐ方法

毎度毎度IE6(Internet Explorer6)の表示バグには泣かされるわけですが、inputタグにも例外なく存在します。　今回は<input>タグを利用する場合に注意することを書きます。

チェックボックス、ラジオボタンなどで余分な余白がでる

フォームでチェックボックスやラジオボタンを使う場合に<input type=”radio”… などと書くわけですが、アクセシビリティを考慮してついこんな書き方をしてしまうことがありますね。

<input type="radio" id="job1" name="job" value="会社員" /><label for="job1">会社員</label>

そう、横に<label>タグをつけて、for属性でクリックしやすくしますよね。

さて、これをFirefoxとIE6で見比べてみた場合、どう見えるでしょうか。

Firefoxで見た場合

FireBugでハイライトさせていますが、ちゃんとチェックボックスの領域だけがハイライトされています。

IE6で見た場合

IE6はIE Developer ToolBarを利用してハイライトさせていますが、なんだか余計な余白がついてしまっています。

どうしても取れない余白

空白をつけたければ、製作者側でCSSを使えばできることなので、一旦CSSでリセットしたいのですが、これがどうやってもできません。

アクセシビリティに配慮するあまり、ビジュアルを犠牲にしてしまいます。　大げさに言い過ぎました。笑　ではどうすればいいか？

<input>タグを<label>タグでくくると直る

このバグですが、<input>タグを<label>タグでくくるようにすると直ってしまいます。　くくってしまうと、for属性は必要ないので削除しちゃいます。

<label><input type="radio" name="job" value="会社員" />会社員</label>

これで余白がなくなり、Firefoxなどと同じ見栄えになりました。

さらにアクセシビリティにも配慮

おまけに、このような<label>タグをつけるような箇所には以下のように「クリックできますよ」というスタイルを施しておくと、<label>タグをクリックしてくれやすくなりますよ。

label {
cursor:pointer;
}