【IE】<label>内の画像<img>がクリックできずイベントを拾わない（ラジオボタン等で使用した画像が反応しない）

3744 ワード
HTML CSS JavaScript IE HTML テキストリンク

何が起きたか

ChromeやFFでは確認できなかったが、IE(11)では
ラジオボタンに画像を使用した際にチェックができない現象が発生

画像部分がクリックできない

form.html
～略～
<link href="/form.css" rel="stylesheet">
～略～
<form>
<div id="hyoka">
<label>好き
<input type="radio" name="hyouka" value="like">
<img src="like.jpg" border="1">
</label>
<label>嫌い
<input type="radio" name="hyouka" value="dislike">
<img src="dislike.jpg" border="1">
</label>
</div>
<input type="submit" value="送信する">
</form>

解決方法

label要素をdisplay:inline-block;にし、画像にpointer-events: none;を付与することで、解決しました。

form.css

#hiyoka label{
    display: inline-block;
    ～略～
}
#hiyoka label img{
    pointer-events: none;
    ～略～
}

IEのバグ？で画像を使われることを想定していないつくりになっているようです。
そこで画像を無効化してラベル自体をボタンにすることで回避できるみたいです。

ただpointer-eventsはIE11未満はサポートされていないみたいなので注意が必要です。
CSS pointer-events (for HTML)

参考リンク

html - Image label for input in a form not clickable in IE11 - Stack Overflow
http://stackoverflow.com/questions/20198137/image-label-for-input-in-a-form-not-clickable-in-ie11