问题描述
这个问题用中文描述不容易让人知道是什么问题(比如上面的标题),
或许英文描述更好明白是什么问题:img and label for input in a form not clickable in IE11.
如果看了英文还是不清楚问题,那么只能上代码了:
<form>
<label>
<input type="checkbox"> some text
<img src="">
</label>
</form>
或者
<form>
<input type="checkbox" id="test"> some text
<label for="test">
<img src="">
</label>
</form>
如上,无论是checkbox还是radio,在IE11中点击img标签,均无法选中input。
解决办法
css方式
注意:在微信浏览器中,应用了pointer-events: none的img标签,如果src属性的值是一个包含二维码的图片,长按识别二维码功能会失效。
label {
display: inline-block;
}
label img {
display: block;
/* fix */
pointer-events: none;
}
js方式(个人不喜欢这种方式)
根据DOM的结点关系,给相应的DOM结点绑定点击事件。
参考
http://stackoverflow.com/questions/20198137/image-label-for-input-in-a-form-not-clickable-in-ie11
http://stackoverflow.com/questions/20524815/ie-11-bug-image-inside-label-inside-form