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

Question

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 1

@FighterJet had the solution for me pointer-events: none; on the nested element allows for the parent to take the event (for ie)

.squishy span {
  position: absolute;
  /*######################
    # THE IMPORTANT PART #
    ######################*/
  /*pointer-events: none;*/ 
  display: inline-block;
  white-space: nowrap;
  top: 0;
  left: 0;
  vertical-align: middle;
  line-height: 75px; /*change to btn height*/
  width: 100%;
  height: 100%;
  -webkit-transition: transfrom .15s;
  -moz-transition: transfrom .15s;
  -ms-transition: transfrom .15s;
  transition: transfrom .15s;
}

/* The solution! */
.solution {
  pointer-events: none;
}



.btn-1 {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.squishy {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
  color: #fff;
  text-align: center;
  background: #333;
  box-shadow: inset 5px 5px 15px rgba(150, 150, 150, .5), inset -5px -5px 15px rgba(0, 0, 0, .5), 3px 3px 5px rgba(0, 0, 0, .7);
  -webkit-transition: box-shadow .15s;
  -moz-transition: box-shadow .15s;
  -ms-transition: box-shadow .15s;
  transition: box-shadow .15s;
}

.squishy:active {
  box-shadow: inset 1px 1px 1px rgba(150, 150, 150, .5), inset -1px -1px 1px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .7);
}



.squishy:active span {
  -webkit-transform: scale(.95);
  transform: scale(.95);
}

<h1>Broken in IE</h1>
<a class="squishy btn-1" type="button">
  <span>O</span>
</a>

<h1>Works in IE</h1>
<a class="squishy btn-1" type="button">
  <span class="solution">O</span>
</a>

I ran into this problem while making buttons. Now they work properly in IE http://codepen.io/FluidOfInsanity/pen/XjpEag