IE 11 Bug - Image inside label inside form

Question

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

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

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.

 

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.

---

Answer 1

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:

img {
    pointer-events: none;
}

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

Answer 2

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

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

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

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

Answer 3

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.