Firefox的CSS兼容性问题

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;
}

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