否定文本缩进会导致单击时出现大量链接选择

Question

所以我经常用来创建使用图像的漂亮SEO链接的方法就是text-indent: -9999px;诀窍.基本上,我创建了一个带有背景图像的块级锚点.我把它设置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 100px区域的链接时,上面的代码将只有95%的时间只有轮廓.但是,当没有定义父母的尺寸时,它似乎会拍摄页面......我想.但在我的这一个例子中,它在父母身上有尺寸,但仍在拍摄.结果,我做了a span { display: none; }诀窍,但我想知道我怎么能用这个text-indent技巧来做,但修复大纲.

有谁知道如何解决这一问题？我需要另一个父母还是需要设置另一个CSS属性？

Answer 1

添加overflow:hidden到标签.

div a {
  overflow: hidden;
}

这样可以保持轮廓边框,但仅限于元素的指定坐标.

应用overflow: hiddendiv或outline: none类似Wayne Austin建议将完全删除可用性问题的轮廓.

Answer 2

这是一篇很棒的文章，用于在 Firefox 中删除该被诅咒的轮廓

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

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