IE 11错误-图像内部标签内的形式。

[英]IE 11 Bug - Image inside label inside form


In IE11, the following piece of code will check the radio button as expected:

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

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

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

Wrapping a <form> around the above will however break the functionality of the label.

包装在上面将会破坏标签的功能。

This SO post offers a solution to the problem by styling the image with pointer-events:none, and the label as a block-level element.

通过使用指针事件:none,以及标签作为块级元素对图像进行样式化,SO post提供了解决问题的方法。

While that should of course not even be necessary, it also disables the ability to handle mouse events.

当然,这甚至是不必要的,但它也禁用了处理鼠标事件的能力。

It would be much appreciated if someone can offer a pure CSS solution to this problem.

如果有人能提供一个纯CSS解决方案来解决这个问题,我将不胜感激。

 

 

PS:

PS:

One thing worth mentioning, is that in IE11, if the image is styled as a block-level element, then pointer-events seems to loose its effects.

值得一提的是,在IE11中,如果图像被设计成块级元素,那么指针事件似乎会失去它的效果。


6 个解决方案

#1


9  

My markup looks like this (classes and other superfluous attributes removed):

我的标记看起来是这样的(删除了类和其他多余的属性):

<li>
    <label>
        <figure>
            <img>
        </figure>
        <div>
            <label></label>
            <input type="radio">
        </div>
    </label>
</li>

It's a bit messy because some of it is auto-generated by Drupal. It didn't work in IE 11, but I made it work by adding:

这有点乱,因为有些是Drupal自动生成的。它在IE 11中没有工作,但我通过添加:

img {
    pointer-events: none;
}

I didn't need to change anything else and I have no other special css-trickery that I can see.

我不需要改变任何东西,我也看不到其他特殊的css-trick。

#2


6  

As I answered previously in the referred question, there is a pure CSS way.

正如我在前面提到的问题中所回答的,有一种纯粹的CSS方法。

If your image is display: block that fix can still be used, even tho you have to add some more trickery. For example:

如果您的图像是显示的:块修复仍然可以使用,即使您必须添加更多的诡计。例如:

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:

HTML:

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>

Fiddle

小提琴

If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)

如果问题是在图像上单击处理程序,那么您可以使用图像上的包装器元素来解决这个问题(可能是标签,因此不需要额外的元素)。(但我想看看你正在尝试的一个更具体的例子。)

#3


1  

You can put the image in the background of the label..

你可以把图片放在标签的背景中。

<label  for="myField1" ><img src="image1.jpg"></label>

becomes

就变成了

<style>
 #lblMyField1 {  
    background-image: url('image1.jpg');
    background-position: center center;/* depend..*/
    background-repeat: no-repeat; 
 } 
</style>

<label id="lblMyField1" for="myField1" >&nbsp;</div>

#4


1  

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

This solved it in my case. The img will be placed behind the label but "shine through". I hope it helps.

这就解决了我的问题。img将被放置在标签的后面,但是“闪亮通过”。我希望它有帮助。

#5


0  

This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.

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

Nest Your Input

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

This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.

这是一个用于将输入与标签关联的通用约定。给定输入和标签都是内联的,这并不一定会影响实际的布局。

JavaScript Patch

Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:

另一个选项是在没有自然发生的情况下,对相应的输入执行单击。在这种方法中,我们设置了一个在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);
    });

});

Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.

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

Demo: http://jsfiddle.net/CG9XU/

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

One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:

需要注意的是,该解决方案只适用于运行案例时页面上的标签。如果表单姗姗来迟(可能是通过ajax),那么需要在DOM上听得更清楚一些。下面的示例监听文档级别:

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

});

The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.

标签元素接受为其内容类型的所有语法元素,这包括图像元素。我将继续研究这个问题,并将以任何见解更新这个答案。

#6


0  

Here is a solution that worked for me using pointer-events:none without having to set my image to position:relative as I needed it to be position:absolute for my design.

这里有一个使用指针事件的解决方案:没有一个不需要设置我的图像位置:相对于我需要的位置:绝对适合我的设计。

HTML

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

CSS

So in this example we have an image that needs to be position: absolute

在这个例子中,我们有一个图像需要位置,绝对

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

Now set pointer-eventson the img-wrapper div

现在设置pointereventson的img-wrapper div。

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/12/11/19ec00c63301542061f80bf869c4a1cc.html



 
  © 2014-2022 ITdaan.com 联系我们: