Chrome与FF按钮单击行为

Question

我在我的按钮上使用了:active pseudoclass来改变点击时的填充和边框颜色.这在视觉上模仿按钮按下.看一个例子.

在FF工作.但是,在Chrome中,点击次数并不总是可以注册.具体来说,如果您单击按钮内的文本,然后拖动文本(但仍然在按钮内),则不会触发单击.如果单击填充,然后拖动到文本中也是如此.

我已经阅读了关于FF与Chrome中的按钮和填充的奇怪内容,但我无法弄清楚如何解决这个问题.

Answer 1

解决方案:给它一个单击的东西

添加position: relative到button,然后用它覆盖:before像这样的伪元素:

button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

似乎为我解决了这个错误.看到这个小提琴.我想它通过在点击它时给一个"元素"集中注意力来解决这个bug(我认为这是一个bug).