在IE11中无法单击表单中输入的图像标签
在IE11中无法单击表单中输入的图像标签
提问于 2013-11-26 00:30:48
问题所在
在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>
请注意，在上面的示例动画中，我点击了第二张图片，这不起作用，但点击文本可以起作用(只是为了演示)。
在上进行了测试和转载
Windows 7专业版SP1 x64上的
- IE 11.0.9600.16428。Windows RT 8.1平板电脑上的
- IE 11.0.9600.16438。Windows 7专业版SP1 x64上的
- IE 11.0.9600.17105。Windows 10
上的
- IE 11.0.10240.16431 <代码>F216
在IE9、IE10、Microsoft Edge和其他浏览器中不会出现此问题。
问题：
在没有 JS的情况下，是否可以在仍然使用图像标记的情况下解决此问题？
- 如果不能，还有哪些其他可能的解决方案？
为什么第二个示例中的图像不触发输入元素(在第一个示例中触发时)？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-27 00:34:17
解决这个问题的一种方法是在图像上使用pointer-events: none，并使用例如display: inline-block调整标签。(IE11中的pointer-events is supported。)
label{
display: inline-block;
}
label img{
pointer-events: none;
}Stack Overflow用户
发布于 2015-04-11 03:14:11
是一个有点老的问题，但由于它在谷歌搜索中相当高，我将在这里发布一个在所有IE版本中解决这个问题的答案。
。
复选框/单选按钮必须在label的之外，它必须有自己的唯一ID，并且label必须有的属性，该属性包含与其相关的复选框/单选按钮的ID：
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">如果您这样做了，并且您使用的是PHP (您可能正在使用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版本，不知道斯巴达tho，我想它不能检测到那个版本)。
附言:我上面的答案实际上不适用于IE8，IE9和IE10。你要知道。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20198137
复制相关文章
相似问题