こんにちは、制作部の梶山です。
今回はlabelタグについてのお話です。
お問い合わせやお申し込み画面の
ユーザビリティを向上させるためによく使われるlabelタグですが、
IE6.7.8ではチェックボックスやラジオボタンなどに
ラベルを適応したくても一筋縄では動いてくれません。
特に画像はまったくの無反応・・・。
FirefoxやGoogle Chromeなどは問題ありませんが
IEさん、いつものようにしれっとその威力を見せつけてくれます。
テキストへの正しい記述はこちら
1 2 |
<input id="test1" type="checkbox" /><label for="test1">チェックボックス1</label> <input id="test2" type="checkbox" /><label for="test2">チェックボックス2</label> |
下のコードのようにinputタグを囲んだりすると動いてくれません。
IE6では「for」でしっかりidを指定しましょう。
1 |
<label for="test1"><input id="test1" type="checkbox" />チェックボックス1</label> |
では、画像への記述は・・・
1 2 3 4 5 6 7 8 |
$(function () { //IE Label img if ($.browser.msie) { $('label').click(function () { $('#' + $(this).attr('for')).focus().click(); }); } }); |
1 2 |
<label for="test1"><img src="images/a.gif" width="180" height="140" alt="test"></label> <input id="test1" type="checkbox" /><label for="test1">チェックボックス1</label> |
と、まあ普通には動かないのでJavaScriptでカバーしなければなりません。
IE9では問題ないんですけどね・・・。
参考サイト
http://depthcode.com/2010/08/ie-label-img.html
http://logic.moo.jp/data/archives/826.html