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

发布时间:2019-03-13 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了html – IE 11 Bug – 内部标签内的图像脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
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 – 内部标签内的图像所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。