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

Posted 2023-03-06

【中文标题】用于在 IE11 中不可点击的表单中输入的图像标签

【英文标题】：Image label for input in a form not clickable in IE11

【发布时间】：2013-12-10 11:28:27

【问题描述】：

问题

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

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

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

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placeimg.com/100/100/any" >
</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 和其他浏览器中不会出现此问题。

问题：

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

【参考方案1】：

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

label
    display: inline-block;

label img
    pointer-events: none;

(Demo at jsFiddle)

【讨论】：

如果使用引导框架，那么所有具有img-responsive 类的图像都会得到display:block 样式。在这种情况下，您需要在label img css 中添加额外的一行。这应该添加：display: inline!important.

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

@chiliNUT：IE11 的错误是点击图像元素并没有做它应该做的事情。通过在图像上设置pointer-events: none 并使标签元素至少与图像一样大，则在标签元素上注册了点击，在这种情况下，IE 会做它应该做的事情。

不做它应该做的，而是做什么？为什么取消指针事件可以解决它？发生了什么指针事件导致它中断？

我的设置可能有点奇怪，但我还需要label imgposition:relative 用于 Windows 7 上的 IE11。

【参考方案2】：

这是一个较老的问题，但由于它在 google 搜索中相当高，我将在此处发布另一个答案，以解决所有 IE 版本中的问题。

.

复选框/收音机必须在标签之外，它必须有自己的唯一ID，并且标签必须具有包含复选框/收音机ID的for属性它与：

<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 寿，我认为它没有检测到那个）。

Ps.：我上面的回答实际上不适用于 IE8、IE9 和 IE10。让你知道。

【讨论】：

正如我在问题中所写的那样，当我测试时，这个错误在 IE10 中不存在。你是说IE10也有这个bug吗？演示？

@Qtax 它还在。我现在在 chrome 和 IE10 中尝试过。在 Chrome 中工作，在 IE10 中不起作用：jsfiddle.net/v4rz346s 但您必须将 IE 设置为 Edge 而不是 IE 10（在 F12 -> Emulation 菜单中）。问题是，Edge 设置为默认设置，因此除非用户将其更改为 IE10，否则它将无法正常工作。

在 IE10（虚拟机中的真实 IE10）中测试了您（和我原来的）示例，可以很好地单击图像。那里没有错误。所以你的测试可能做错了什么。

真正的IE10是什么意思？我在我的 Win 7 PC 上安装了真正的 IE10。如果按 F12 并转到仿真选项卡。你的文档模式是什么？对我来说它的边缘（默认）。仅当我选择 10 时才有效。由于 Edge 是默认设置，因此它不应该适用于所有人。即使它在 IE10 中有效，您提供的答案也仅在 IE 11 中有效，您可以在此处看到：caniuse.com/#feat=pointer-events

真正的 IE10 我的意思是没有在其他 IE 版本中模拟。我有一个clean windows 7 VM with IE10。我唯一要做的就是打开发布的链接you (and I)，然后我可以单击图像来选择选项（和复选框）。这意味着没有错误。至少在正常情况下不会，当不弄乱 F12 和仿真选项时。