Sirisian Sirisian - 2 months ago 19
CSS Question

:active selector in IE11 doesn't work if there are nested elements? How do I make clicks ignore nested elements?

In every other browser the :active selector works even if there are elements nested inside the anchor tag, but IE11 seems special. (Microsoft Edge is apparently fine).

I'd expect when I click on the anchor tag, even if I click on the span, that the active selector will be applied.

http://jsfiddle.net/91ejuvjm/4/

HTML

<a href="#"><span>Click here</span></a>


CSS

a
{
display: block;
background-color: red;
}
a:active
{
background-color: blue;
}


It's an anchor tag and according to the spec it can be active, but it's like the span tag captures the click. I tried adding pointer-events:none; to the span tag and it ignores it which is against the spec and obviously a bug. I also thought maybe it was being selected since it's text, but -ms-user-select: none; doesn't help. Am I missing something obvious? How do I make clicks ignore the span tag in IE11?

Answer

IE11 doesn't allow block elements I guess to function that way.

http://jsfiddle.net/91ejuvjm/7/

span
{
    display: inline-block;
}

Another example that's probably more complete: http://jsfiddle.net/91ejuvjm/8/

Was playing around and changed the span to inline-block and it's fine.