Question

在每个其他浏览器中：活动选择器即使嵌套在锚标记内也有效，但IE11看起来很特殊。（Microsoft Edge显然很好）。

我希望当我点击锚标签时，即使我点击了跨度，也会应用活动选择器。

HTML

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

CSS

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

它是一个锚标记，根据规范，它可以是活动的，但就像span标记捕获点击一样。我尝试添加指针事件：无;到span标签，它忽略了它违反规范，显然是一个bug。我也想过它可能是因为它是文本而被选中，但是-ms-user-select：none;没有帮助。我错过了一些明显的东西吗如何使点击忽略IE11中的span标记？

Answer 1

@FighterJet让我在嵌套元素上的解决方案pointer-events: none;允许父级接受事件（对于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>

我在制作按钮时遇到了这个问题。现在它们在IE http://codepen.io/FluidOfInsanity/pen/XjpEag

中正常工作

Answer 2

IE11不允许块元素我猜这个功能。

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

span
{
    display: inline-block;
}

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

正在游戏并将跨度更改为内联块，这很好。

：如果有嵌套元素，IE11中的活动选择器不起作用？如何使点击忽略嵌套元素？

2 个答案: