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

Question

在IE11中,以下代码将按预期检查单选按钮:

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

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

包装一个<form>围绕上述然而将打破标签的功能.

这个SO帖子通过使用样式设置图像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

正如我之前在提到的问题中回答的那样,有一种纯粹的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

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

嵌套您的输入

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

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

JavaScript 补丁

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

$("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);
    });

});

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