在IE11中无法点击的表单中输入的图像标签 [英] Image label for input in a form not clickable in IE11

问题描述

问题

在IE11中，以下代码中的图片可以点击以激活/切换标签中的输入：

 < label> 
< input type =checkbox>一些文字
< img src =http://placeimg.com/100/100/anyalt =some img> 
< / label> 
  

虽然在这个完全相同的代码中但是在

 < form> 
< label> 
< input type =checkbox>一些文字
< img src =http://placeimg.com/100/100/anyalt =some img> 
< / label> 
< / form> 
  

（ ）

 标签{
 display：inline-block; 
} 
 label img {
 pointer-events：none; 
} 
  

（ Demo at jsFiddle ）

The problem

In IE11 the image in the following code is clickable to activate/toggle the input in the label:

<label>
    <input type="checkbox"> some text
    <img src="http://placeimg.com/100/100/any" alt="some img">
</label>

While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>

(Demo at jsfiddle)

Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).

This was tested and reproduced on:

• IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
• IE 11.0.9600.16438 on Windows RT 8.1 tablet.
• IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
• IE 11.0.10240.16431 on Windows 10

This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.

Questions:

1. Can this be solved without JS while still using image tags?
2. If not, what other possible solutions are there?
3. (Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?

解决方案

One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)

label{
    display: inline-block;
}
label img{
    pointer-events: none;
}

(Demo at jsFiddle)

这篇关于在IE11中无法点击的表单中输入的图像标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！