在IE11中,以下代码将按预期方式检查单选按钮:
<input type="radio" id="myRadio" /> <label for="myRadio"> <img src="..." /> </label>
This SO post通过使用指针事件对图像进行样式化来提供问题的解决方案:none,标签作为块级元素。
虽然这当然不是必要的,但它也禁用了处理鼠标事件的能力。
如果有人可以为此问题提供纯CSS解决方案,那将是非常感激的。
PS:
值得一提的是,在IE11中,如果将图像设计为块级元素,那么指针事件似乎会消失其影响。
解决方法
正如我在
the referred question年以前回答的那样,有一种纯粹的CSS方式。
如果您的图像显示:阻止修复仍然可以使用,即使你必须增加一些更多的诡计。例如:
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>
如果问题是图像上的点击处理程序自身,您可能可以使用图像上的包装元素来解决这个问题(这可能是标签,因此不需要额外的元素)。 (但是我想看到一个更具体的例子,你正在努力。)