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>

覆盖物化-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。

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

1 个答案: