css - 负文本缩进导致点击时选择大链接

Question

因此，我经常使用text-indent: -9999px; 技巧来创建使用图像的漂亮 SEO 链接。基本上，我创建了一个带有背景图像的 block 级 anchor 。我将其 text-indent 设置为一个很大的负数，这样您就看不到它，这对 SEO 很有好处。但是，当我单击链接时，它的轮廓会从页面上弹出(即它与非常远的文本一起出现)。我发现这只发生在某些情况下，大部分时间:

<div>
  <a href="#">SEO text</a>
</div>

div {
  width: 100px;
  height: 100px;
}

  div a {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 100px;
    background: url(stuff) etc...;
  }

当您单击仅 100 x 100 像素区域的链接时，上述代码将有 95% 的时间只有轮廓。但是，当没有定义父级的尺寸时，它似乎会跳出页面……我想。但在我的这个案例中，它在父级上有尺寸，但仍然从页面上弹出。结果，我做了 a span { display: none; } 技巧，但我想知道如何使用 text-indent 技巧来修复大纲。

有人知道怎么解决吗？我需要另一个父对象还是需要设置另一个 CSS 属性？

Answer 1

在a标签中添加overflow:hidden

div a {
  overflow: hidden;
}

这会保留轮廓边框，但仅在元素的指定坐标中。

在 div 上应用 overflow: hidden 或 outline: none 像 Wayne Austin suggests将完全删除存在可用性问题的轮廓。