在 Firefox 中设置按钮的奇怪行为

Question

我有这种 css 样式可以为 bootstrap 4 制作圆形按钮

.btn-circle {
    width: 50px;
    height: 50px;
    padding: 6px 0px;
    border-radius: 50%;
    font-size: 1.5rem;
    text-align: center;
}

这是使用的html

 <button class="btn btn-primary btn-circle"><i class="fas fa-sign-out-alt"></i></button>

使用 chrome 浏览器可以正常工作，但是当我使用 firefox 78.4 版单击时，按钮的背景会被 btn-primary 类背景颜色填充，从而在很短的时间内形成方形按钮。

试过这样的伪类

.btn-primary.btn-circle:hover:active:focus {
    background-color: transparent !important;
}

但没有运气。

那么，如何在 firefox 中解决此问题？

---

更新：

如果我删除 .btn-primary 类，按钮的背景将填充为白色；但真的不知道是什么 css 规则导致了 firefox 中的这种行为。

Answer 1

box-shadow 属性正在发生，该属性默认取自 bootstrap-4。

所以你必须用你的自定义 css 覆盖那个 css。

.btn-primary.btn-circle {
    width: 50px;
    height: 50px;
    padding: 6px 0px;
    border-radius: 50%;
    font-size: 1.5rem;
    text-align: center;
    outline:none;
}
.btn-primary.btn-circle.focus, .btn-primary.btn-circle:focus, .btn-primary.btn-circle:not(:disabled):not(.disabled):active:focus{
    box-shadow: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button class="btn btn-primary btn-circle"><i class="fas fa-sign-out-alt"></i></button>

Answer 2

为了解决这个问题，给这个类添加边距.btn-circle

还将引导按钮 css 应用于 .btn-circle 以避免像这样使用 .btn.btn-circle 类

.btn.btn-circle {
  width: 50px;
  height: 50px;
  padding: 6px 0px;
  border-radius: 50%;
  font-size: 1.5rem;
  text-align: center;
margin: 10px;
}

.btn-primary.btn-circle:hover:active:focus {
  background-color: transparent !important;
}

<button class="btn btn-primary btn-circle"><i class="fas fa-sign-out-alt"></i></button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">