Html 用于在 IE11 中不可点击的表单中输入的图像标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20198137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image label for input in a form not clickable in IE11
提问by Qtax
The problem
问题
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
在 IE11 中，以下代码中的图像可单击以激活/切换标签中的输入：
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form>is not clickable to activate/toggle the input:
虽然此完全相同的代码中的图像但在 a 内部<form>不可点击以激活/切换输入：
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
请注意，在上面的示例动画中，我单击了第二张图像，这不起作用，但单击文本有效（只是为了演示）。
This was tested and reproduced on:
这是在以下平台上测试和复制的：
- IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
- IE 11.0.9600.16438 on Windows RT 8.1 tablet.
- IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
- IE 11.0.10240.16431 on Windows 10
- 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
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
此问题在 IE9、IE10、Microsoft Edge和其他浏览器中不会出现。
Questions:
问题：
- Can this be solved withoutJS while still using image tags?
- If not, what other possible solutions are there?
- (Optional)Why doesn't the image in the second example trigger the input element (while doing it in the first)?
- 在仍然使用图像标签的情况下，可以在没有JS 的情况下解决这个问题吗？
- 如果没有，还有哪些其他可能的解决方案？
- （可选）为什么第二个示例中的图像不触发输入元素（而在第一个示例中执行此操作）？
回答by Qtax
One way to fix this is with pointer-events: noneon the image, and adjusting the label with for example display: inline-block. (pointer-eventsis supportedin IE11.)
解决此问题的一种方法是pointer-events: none在图像上使用，并使用例如 调整标签display: inline-block。（在 IE11 中pointer-events受支持。）
label{
display: inline-block;
}
label img{
pointer-events: none;
}
回答by MiChAeLoKGB
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
是一个有点老的问题，但由于它在谷歌搜索中相当高，我会在这里发布一个在所有 IE 版本中修复这个问题的答案。
.
.
The checkbox/radio has to be outsideof label, it has to have own unique ID and label has to have attribute forwhich contains the ID of checkbox/radio its related to:
复选框/收音机必须在标签之外，它必须有自己的唯一 ID，标签必须具有包含复选框/收音机 ID 的属性，与它相关：
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
如果你这样做了，如果你使用 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>
<?
}
I know its JS, but there is actually no other fix for =< IE10without JS usage.
我知道它的 JS，但实际上没有=< IE10JS 使用没有其他修复。
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
它检测所有 IE 版本（包括 IE10 和 11，不知道 Spartan tho，我认为它没有检测到那个）。
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
Ps.：我上面的答案实际上不适用于 IE8、IE9 和 IE10。只要你知道。
