表单中用于输入的图像标签在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>

(在 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. (可选) 为什么第二个示例中的图像没有触发输入元素（而第一个示例中却可以）？

- Qtax

Answer 1

一种解决方法是在图片上使用pointer-events: none，并通过例如display: inline-block来调整标签。(pointer-events被IE11支持。)

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

(jsFiddle演示)

- Qtax

---

如果使用Bootstrap框架，则所有带有类“img-responsive”的图像都会获得“display:block”样式。在这种情况下，您需要向“label img” CSS添加一行额外的代码。应该添加：display: inline!important。 - Timo002

为什么 pointer-events:none 可以解决这个问题？图片的 display 属性为什么很重要？这个答案根本没有解释实际问题是什么。 - chiliNUT

IE11的bug在于点击图片元素没有产生预期的效果。通过在图片上设置pointer-events: none，并使标签元素至少与图片一样大，在标签元素上注册点击事件，这样IE就会产生预期的效果。 - Qtax

它没有按照预期执行，那么它实际上会做什么？为什么取消指针事件可以解决它？是哪个指针事件导致了它的故障？ - chiliNUT

可能是我的设置有些问题，但我在Windows 7上的IE11中也需要label img{position:relative}。 - nvioli

Answer 2

这是一个比较老的问题，但由于在谷歌搜索中排名较高，因此我将在此发布另一个答案，可解决所有IE版本的问题。

.

复选框/单选按钮必须放在标签外，它必须拥有自己独特的ID，并且标签必须具有包含所关联复选框/单选按钮的ID的属性：

<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">

如果您已经完成了这一步，并且使用的是PHP（可能性很高），则可以使用以下代码：

if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
    ?>
    <script>
        $(document).ready(function() {
            $("label img").on("click", function() {
                $("#" + $(this).parents("label").attr("for")).click();
            });
        });
    </script>
    <?
}

我知道这是JS，但在没有使用JS的情况下，实际上没有其他解决方案来解决“=< IE10”的问题。

它可以检测所有IE版本（包括IE10和11，不确定Spartan是否被检测到）。

附：上面的答案实际上不适用于IE8、IE9和IE10。只是让你知道。

- MiChAeLoKGB

---

这个 bug 在我测试时 IE10 中并不存在，就像我在问题中所写的一样。您是否在说 IE10 也有这个 bug？演示一下？ - Qtax

@Qtax 它仍然存在。我现在在Chrome和IE10中尝试了一下。在Chrome中可以工作，在IE10中不行：http://jsfiddle.net/v4rz346s/ 但你必须将IE设置为Edge而不是IE 10（在F12->仿真菜单中）。问题是，Edge被设置为默认值，因此除非用户将其更改为IE10，否则它将无法正常工作。 - MiChAeLoKGB

在IE10（虚拟机中的真实IE10）中测试了您的（和我的原始）示例，可以正常点击图像。没有错误。因此，您可能在测试中做错了什么。 - Qtax

我所说的真正的IE10是指不是在其他IE版本中模拟的。我有一个带有IE10的干净的Windows 7虚拟机。我所做的唯一的事情就是打开你们发布的链接（你和我），然后我可以点击图片来选择选项（和复选框）。这意味着没有错误。至少在正常情况下，不要去搞F12和仿真选项。 - Qtax

@Qtax 哦，你认为我没有IE 10 :D 不，我有IE 10，是来自微软的官方版本（我不认为VM是真正的PC，你可能无法获得未更改的官方Windows和IE，就像在现实生活中一样）。但是，正如我所说，上面的答案仅适用于IE 11，在其中这很好用，所以如果它在IE 8到IE 10（包括）中没有帮助，我不知道为什么它实际上被接受为一个答案............... 是的，我知道了，我会将代码更改为onclick。这是我使用的旧代码，因为它运行良好，所以我从未费心更新它。他遇到了问题，因为他将复选框放在标签内，这是错误的 :) - MiChAeLoKGB