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

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

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

虽然中的图像与此代码完全相同，但a的内部无法单击以激活/切换输入：

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

请注意，在上面的示例动画中，我单击了第二个图像，这不起作用，但单击文本起作用只是为了演示

这是在以下设备上测试和复制的：

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和其他浏览器中不会出现此问题

问题： 在没有JS的情况下，仍然使用图像标签可以解决这个问题吗？ 如果没有，还有什么其他可能的解决方案？ 可选为什么第二个示例中的图像在第一个示例中不触发输入元素？

---

解决此问题的一种方法是使用指针事件：在图像上无，并使用例如display:inline block调整标签。IE11中的指针事件

---

是一个比较老的问题，但由于它在谷歌搜索中的排名很高，我将在这里发布一个在所有IE版本中都能解决这个问题的答案

复选框/收音机必须位于标签之外，它必须具有自己的唯一ID，并且标签必须具有包含复选框/收音机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使用的情况下，= 它检测所有IE，包括IE10和11版本，我不知道斯巴达透，我认为它没有检测到那个版本

---

注：我上面的答案实际上并不适用于IE8、IE9和IE10。正如您所知。

如果使用引导框架，则所有具有img responsive类的图像都会显示：块样式。在这种情况下，您需要在标签imgcss中添加一行额外的内容。应添加以下内容：显示：内联！重要提示：为什么指针事件：无可以解决此问题？为什么图像的显示属性很重要？这个答案根本不能解释实际的问题是什么。@chiliNUT:IE11的错误在于单击image元素并不能完成它应该做的事情。通过在图像上设置指针事件：无，并使标签元素至少与图像一样大，则在标签元素上注册单击，在这种情况下，IE会执行它应该执行的操作。如果不执行它应该执行的操作，它会执行什么操作？为什么取消指针事件可以解决这个问题？发生了什么指针事件导致它断开？可能是我的设置有点奇怪，但我还需要在Windows 7上为IE11添加img{position:relative}。正如我在问题中所写的，当我测试时，IE10中不存在此错误。你是说IE10也有这个bug吗？演示？@Qtax它还在那里。我现在在chrome和IE10上试用过。在Chrome中工作，在IE10中不工作：但您必须将IE设置为Edge，而不是F12->仿真菜单中的IE 10。问题是，该边缘设置为默认值，所以除非用户将其更改为IE10，否则它将无法工作。在虚拟机中的IE10 real IE10中测试了您和我的原始示例，可以点击图像。那里没有虫子。所以你的测试可能有问题。你说真正的IE10是什么意思？我的Win 7电脑上安装了真正的IE10。如果按F12键并转到仿真选项卡。你的文档模式是什么？对我来说，它的边缘是默认的。仅当我选择10时有效。由于Edge是默认的，它不应该适用于所有人。即使它在IE10中有效，你得到的答案也只在IE11中有效，正如你在这里看到的：真正的IE10我指的是在其他IE版本中不被模仿。我有一本书。我所做的唯一一件事就是打开发布的链接，我可以点击图片来选择选项和复选框。这意味着没有bug。至少在正常情况下，当不干扰F12和仿真选项时不会。

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>
    <?
}