用于在IE11中无法单击的表单中输入的图像标签

Question

问题

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

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

虽然这个完全相同的代码但在a内部的图像<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. (可选)为什么第二个示例中的图像不会触发输入元素(在第一个示例中执行)？

Answer 1

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

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

(在jsFiddle演示)

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,但实际上没有其他修复,=< IE10没有JS使用.

它检测所有的IE,版本(包括IE10和11,不知道Spartan tho,我认为它没有检测到那个).

Ps.:上面的答案实际上并不适用于IE8,IE9和IE10.你知道吗