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.


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


display: block;
background-color: red;
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?


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

    display: inline-block;

Another example that's probably more complete:

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