CSS 的 Firefox 兼容性问题

Question

我在使用以下代码的 firefox v60 时遇到了一些问题：

.btn:focus, .btn:active {
  background-color: orange !important;
  /*background: red !important;*/
}
.btn-primary{
    border-color: #9b9e9e !important;
    box-shadow: none !important;
    background-color: #9b9e9e !important;
}

https://jsfiddle.net/zsvdph8r/7/

我想在单击按钮后更改按钮的颜色，但该按钮的颜色不会持续存在。它适用于 chrome 和 firefox v52。

有人可以帮我吗？

谢谢

Answer 1

我看到的方式是:focus 是一个问题，当我们单击按钮时，焦点仍然在按钮上方的 chrome 上，但在 Firefox 中没有。这就是这些浏览器在这里的不同工作方式。

.btn:active 是正确的代码，它将在点击时添加颜色或任何过渡，并在完成任务后消失。

但如果你坚持相同然后将按钮更改为<a>标签并使用

.btn:active {
  color: orange;
}

这将解决您的问题，但如果您愿意，您可能需要添加更多样式以使链接看起来像按钮。