Firefox 点击后突然显示焦点轮廓。单击后如何避免轮廓但将其留给键盘焦点？

Question

我在 Windows 10 上使用 Firefox 75.0，从今天开始，我的按钮在被点击后会出现虚线轮廓。 据我所知，我使用的是与昨天相同的 Firefox 版本，我的代码没有更改任何内容，但点击后的大纲是新的。

这里是使用来自 svelte-routing 的 <Link> 从我的 svelte 代码中截取的（对于样式，我使用了一些自定义更改的 materialize-css）：

苗条：

<li class="nav-item">
  <Link {to}>
    <span class="icon-button">
      <i class="material-icons icon-button">{icon}</i>
    </span>
  </Link>
</li>

呈现的 HTML：

<li class="nav-item svelte-l3ibn0">
  <a href="/" aria-current="page">
    <span class="icon-button svelte-l3ibn0">
      <i class="material-icons icon-button svelte-l3ibn0">home</i>
    </span>
  </a>
</li>

为自定义样式覆盖 materialize-css：

 .nav-item {
    width: calc(var(--nav-size) * 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-button {
    --button-size: calc(var(--nav-size) * 0.5);
    width: var(--button-size);
    height: var(--button-size);
    background-color: #484a4d;
    border-radius: 50%;
    padding: 18px;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 300ms;
  }

  .icon-button:hover {
    filter: brightness(1.2);
  }

  .icon-button i {
    fill: var(--text-color);
    width: 10px;
    height: 10px;
  }

这就是它的样子—— Not clicked, after I clicked it

我刚刚学习苗条，而且我对前端开发还很陌生。我可能遗漏了一些简单的东西。

提前致谢。

Answer 1

这可能是 Firefox 在焦点/活动链接中添加大纲。您可以通过将大纲设置为无来删除它：

.nav-item a {
  outline: 0;
}

如果这不起作用，请尝试像这样重置它：

.nav-item a,
.nav-item a:focus,
.nav-item a:active {
  outline: 0;
}

请记住，您可能会给使用键盘浏览网络的人带来问题，这里是 more info about it。