Question

我正在使用Ionic框架开发移动应用程序并使用Ripple模拟器进行测试。我无法点击按钮。我认为此问题伴随着Chrome更新，但我不确定。我已将问题分解为默认的ionic.css中的以下css：

  .button:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' '; }

问题可以很容易地产生如下：

<button class="button">hello</button>

请参阅http://codepen.io/anon/pen/bNXpaV

这似乎是由设置的位置和内容属性的一些相互作用引起的。我可以通过删除content: ' '或在第二个css块中设置content: normal来解决问题（我不想修改ionic.css源）....但为什么会发生这种情况？< / p>

Answer 1

因为:after内容涵盖整个页面。如果您将background: red添加到CSS中，那么我的意思就是这个。

当元素为position: absolute时，top left right和bottom坐标相对于具有指定position的最近父级属性。在这种情况下，父元素是body。

默认情况下，指针事件不会通过伪元素，因此您无法通过叠加层单击按钮（我希望这具有直观意义）。

尝试将pointer-events: none添加到:after。您现在应该可以单击该按钮，即使它位于红色块下面，因为none告诉浏览器忽略:after伪元素上的指针事件。

.button:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' ';
    background: red;
    pointer-events: none;
}

（见http://codepen.io/anon/pen/GgVZxV）

CSS：按钮的内容和绝对位置使其无法点击

1 个答案: