负面文本-缩进导致单击时的大链接选择。

Question

因此，我经常使用的一个方法来创建漂亮的SEO链接，使用图像是text-indent: -9999px;技巧。基本上，我创建一个带背景图像的块级锚点。我把它的text-indent设置为一个很大的负数，所以你看不到它，这对搜索引擎优化有好处。但是，当我点击链接时，它的轮廓就会从页面上弹出(也就是说，它与真正遥远的文本相匹配)。我发现这种情况只发生在某些情况下，大部分时间都是

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

上面的代码95%的时候只有当你点击仅仅100 x 100 of区域的链接时才有轮廓。然而，当不定义父级的维度时，它似乎会从页面中跳出来.我认为。但是在我的一个例子中，它在父级上有维度，但是仍然是从页面上冒出来的。因此，我执行了a span { display: none; }技巧，但我想知道如何使用text-indent技巧来实现它，但是修复了大纲。

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

Answer 1

下面是一个用于删除firefox中受诅咒的轮廓的伟大的文章

仅仅添加一个链接感觉很懒，所以在这里，将它添加到您的CSS中：

a
{
  outline: none;
}
:focus
{
  -moz-outline-style: none;
}

Answer 2

将overflow:hidden添加到a标记中。

div a {
  overflow: hidden;
}

这维护大纲边框，但只在元素的指定坐标中。

将overflow: hidden应用于div或outline: none (如韦恩·奥斯汀 )将完全消除大纲，这是一个可用性问题。

Answer 3

只需添加溢出:隐藏在您的div a上