html – IE 11 Bug – 内部标签内的图像

概述在IE11中，以下代码将按预期方式检查单选按钮： <input type="radio" id="myRadio" /><label for="myRadio"> <img src="..." /></label> 包裹< form>不过，上述将破坏标签的功能。 This SO post通过使用指针事件对图像进行样式化来提供问题的解决方案：none，标签作为块级元素。 虽然这当然不是 在IE11中，以下代码将按预期方式检查单选按钮：

<input type="radio" ID="myRadio" /><label for="myRadio">    <img src="..." /></label>

包裹< form>不过，上述将破坏标签的功能。

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>

Fiddle

如果问题是图像上的点击处理程序自身，您可能可以使用图像上的包装元素来解决这个问题(这可能是标签，因此不需要额外的元素)。 (但是我想看到一个更具体的例子，你正在努力。)

总结

以上是内存溢出为你收集整理的html – IE 11 Bug – 内部标签内的图像全部内容，希望文章能够帮你解决html – IE 11 Bug – 内部标签内的图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。