html - 用于在 IE11 中不可单击的表单中输入的图像标签

Question

问题

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

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

虽然图像中的代码完全相同，但在 <form> 中不可点击以激活/切换输入:

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

( Demo at jsfiddle )

请注意，在上面的示例动画中，我点击了第二张图片，这不起作用，但点击文本有效(只是为了演示)。

这已在以下位置进行测试和复制:

• Windows 7 Pro SP1 x64 上的 IE 11.0.9600.16428。
• Windows RT 8.1 平板电脑上的 IE 11.0.9600.16438。
• Windows 7 Pro SP1 x64 上的 IE 11.0.9600.17105。
• Windows 10 上的 IE 11.0.10240.16431

在 IE9、IE10、Microsoft Edge 和其他浏览器中不会出现此问题。

问题:

1. 这可以在没有 JS 的情况下解决，同时仍然使用图像标签吗？
2. 如果没有，还有哪些其他可能的解决方案？
3. (可选) 为什么第二个示例中的图像不触发输入元素(而在第一个示例中触发)？

Answer 1

解决此问题的一种方法是在图像上使用 pointer-events: none，并使用例如 display: inline-block 调整标签。 (pointer-events is supported 在 IE11 中。)

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

( Demo at jsFiddle )