:如果有嵌套元素，IE11中的活动选择器不能工作?如何使点击忽略嵌套元素?

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

在所有其他浏览器中:active selector都可以工作，即使锚标记中嵌有元素，但IE11似乎很特殊。(微软Edge显然很好)。

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

我希望当我点击锚标记时，即使我点击span，主动选择器也会被应用。

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?

它是一个锚标记，根据规范它可以是活动的，但是它就像span标记捕获点击一样。我试着添加pointer-events:没有;对于span标签，它会忽略它这是违反规范的，显然是错误的。我也认为它可能是被选中的因为它是文本，但是-ms-user-select: none;没有帮助。我漏掉了什么明显的东西吗?如何使单击忽略IE11中的span标记?

2 个解决方案

#1

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

@ fight terjet为我提供了pointer-events的解决方案:没有;在嵌套元素中，允许父元素接收事件(用于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

我在做按钮时遇到了这个问题。现在它们可以在IE http://codepen.io/FluidOfInsanity/pen/XjpEag中正常工作

#2

-1

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

IE11不允许块元素那样工作。

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

span
{
    display: inline-block;
}

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

另一个例子可能更完整:http://jsfiddle.net/91ejuvjm/8/

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

是在玩游戏，把跨度改成了inline-block，这很好。

#1