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-trickery，我可以看到。

Answer 2

正如我先前在the referred question中回答的那样，有一种纯粹的CSS方式。

如果你的图像是display: block，那么仍然可以使用该修复，即使你必须添加更多的技巧。例如：

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

如果问题出在图像上的点击处理程序，你可以用图像上的包装元素来解决（可能是标签，所以没有额外的元素可能是需要）。（但为此我想看一个你想要做的更具体的例子。）

Answer 3

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

这解决了我的情况。 img将被放置在标签后面，但“闪耀”。我希望它有所帮助。

Answer 4

您可以将图像放在标签的背景中。

<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>

Answer 5

这是一个相当有趣的发现。我会做更多的研究，以确定我是否能找出更多根本原因，但目前我有一些建议。

嵌套您的输入

<label>
    <input />
    <img />
</label>

这是用于将输入与标签相关联的常用约定。鉴于输入和标签都是内联的，这不一定会影响实际布局。

JavaScript补丁

另一种选择是在没有自然发生的情况下对相应的输入执行单击。在这种方法中，我们设置了100ms后单击的超时。任何发生的点击都会清除我们的超时：

$("label[for]").each(function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    $(this).on("click", function () {
        timeout = setTimeout(function () {
            element.click();
        }, 100);
    });

    element.on("click", function () {
        clearTimeout(timeout);
    });

});

已经工作的浏览器将清除超时，防止再次点击。 Internet Explorer 11将通过超时单击。

演示：http://jsfiddle.net/CG9XU/

有一点需要注意的是，该解决方案仅适用于案例运行时页面上的标签。如果你有迟到的表格（也许是通过ajax），你需要在DOM上更高层次地倾听。以下示例侦听document级别：

$(document).on("click", "label[for]", function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    timeout = setTimeout(function () {
        element.click();
    }, 100);

    element.one("click", function () {
        clearTimeout(timeout);
    });

});

label元素接受所有短语元素作为其内容类型，这包括图像元素。我会继续研究这个问题，并会以任何见解更新这个答案。

Answer 6

这是一个使用pointer-events:none为我工作的解决方案，而不必将我的图像设置为position:relative，因为我需要position:absolute进行设计。

HTML

`<form>
    <input id="radio-button-action" type="radio" name="search" value="open">
    <label for="radio-button-action">
        <div class="img-wrapper">
            <img src="images/image.jpg" alt="image">
        </div>
    </label>
</form>`

CSS

所以在这个例子中我们有一个需要位置的图像：绝对

img {
    position: absolute
    top: 10px;
    right: 10px;
    height: 25px;
    width: 25px;
    display: inline-block; /* can be block, doesn't matter */
}

现在在img-wrapper div上设置pointer-events

.img-wrapper {
    position: relative /* this is required for this to work */
    pointer-events: none /* this is what will make your image clickable */
}

Answer 7

它与

一起使用

img {
  pointer-events: none;
}

IE 11 Bug - 图像里面的标签形式

7 个答案:

嵌套您的输入

JavaScript补丁