IE 11 Bug - 标签内部的图像 [英] IE 11 Bug - Image inside label inside form

问题描述

在IE11中，以下代码将按预期检查单选按钮：

In IE11, the following piece of code will check the radio button as expected:

<input type="radio" id="myRadio" />

<label for="myRadio">
    <img src="..." />
</label>

包围< form> 以上会破坏标签的功能。

Wrapping a <form> around the above will however break the functionality of the label.

通过使用样式化图像，这个SO post 提供了一个问题的解决方案。 >

This SO post offers a solution to the problem by styling the image with pointer-events:none, and the label as a block-level element.

虽然这当然不是必须的，但它也禁用了处理鼠标事件的能力。

While that should of course not even be necessary, it also disables the ability to handle mouse events.

如果有人可以为这个问题提供一个纯CSS解决方案，将非常感激。

It would be much appreciated if someone can offer a pure CSS solution to this problem.

 

PS：

值得一提的是，在IE11中，如果图像被称为块级元素，

---

One thing worth mentioning, is that in IE11, if the image is styled as a block-level element, then pointer-events seems to loose its effects.

推荐答案

正如我在

As I answered previously in the referred question, there is a pure CSS way.

如果你的图片 display：block 修复仍然可以使用，即使你必须添加一些更加棘手。例如：

If your image is display: block that fix can still be used, even tho you have to add some more trickery. For example:

CSS：

label img{
    display: block; /* requirement */
    /* fix */
    pointer-events: none;
    position: relative;
}

/* fix */
label{
    display: inline-block;
    position: relative;
}
label::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

HTML：

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>

Fiddle

如果问题是图片上的点击处理程序自己，您可以使用图像上的wrapper元素来解决（这可能是标签，因此不需要额外的元素）。 （但是，我想看一个更具体的例子，你试图做）。

If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)

这篇关于IE 11 Bug - 标签内部的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！