IE 11 Bug -图片内标签内部形式

Question

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

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

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

然而，围绕上面的<form>包装将破坏标签的功能。

This SO post为这个问题提供了一种解决方案，方法是使用pointer-events:none对图像进行样式化，并将标签设置为块级元素。

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

如果有人能为这个问题提供一个纯CSS解决方案，那将是非常感谢的。

PS：

值得一提的是，在IE11中，如果图像被设计为块级元素，那么pointer-events似乎失去了它的效果。

Answer 1

我的标记看起来如下(类和其他多余的属性被删除了)：

<li>
    <label>
        <figure>
            <img>
        </figure>
        <div>
            <label></label>
            <input type="radio">
        </div>
    </label>
</li>

这有点混乱，因为其中有些是由Drupal自动生成的。它在IE 11中不起作用，但我通过添加：

img {
    pointer-events: none;
}

我不需要改变任何其他的东西，我没有其他特殊的css-诡计，我可以看到。

Answer 2

img {
    pointer-events: none;
    position: relative;
    z-index: -1;
}

这在我的案子里解决了。img将被放置在标签后面，但会“照透”。希望能帮上忙。

Answer 3

你可以把图片放在标签的背景里。

<label  for="myField1" ><img src="image1.jpg"></label>

变成了

<style>
 #lblMyField1 {  
    background-image: url('image1.jpg');
    background-position: center center;/* depend..*/
    background-repeat: no-repeat; 
 } 
</style>

<label id="lblMyField1" for="myField1" >&nbsp;</div>