Css 负文本缩进会导致单击时选择较大的链接

因此，我经常使用

文本缩进：-9999px技巧。基本上，我创建了一个带有背景图像的块级锚点。我把它的
文本缩进设置为一个大的负数，这样你就看不到它了，这对搜索引擎优化有好处。但是，当我点击链接时，它的轮廓会从页面上弹出（即，它与非常遥远的文本一起）。我发现这只发生在某些情况下，大多数情况下：

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


div{
宽度：100px；
高度：100px；
}
a组{
显示：块；
文本缩进：-9999px；
宽度：100px；
高度：100px；
背景：网址（资料）等。。。；
}

当你点击100x100px区域的链接时，上面的代码95%的时间只有轮廓。然而，当不定义父对象的维度时，它似乎脱离了页面。。。。我想。但在我的这个例子中，它在父级上有维度，但仍然会从页面上弹出。因此，我做了
a span{display:none；}
技巧，但我想知道如何使用
文本缩进
技巧，但修复了大纲

有人知道如何解决这个问题吗？我需要另一个家长还是需要设置另一个CSS属性？
这里有一个用于删除firefox中被诅咒的轮廓的方法

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

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

只需在diva上添加overflow:hidden
将
overflow:hidden
添加到a标记

div a {
  overflow: hidden;
}

这将保持轮廓边界，但仅在元素的指定坐标中

在div上应用
overflow:hidden
或
outline:none
之类将完全删除大纲，这是一个可用性问题。
+1-我已经注意到了一些问题，但从未考虑过。好问题。有人知道如何在不设置
大纲的情况下实现这一点吗：无
？我感兴趣的是，为什么这似乎只是偶尔发生，而不是试图让症状消失。至少我投了一票！虽然在没有鼠标的情况下使页面完全不可用，但它也有其优点和缺点，因为当你用键盘点击时，屏幕上没有反馈，但它确实解决了这个问题。非常感谢您提供的信息。@David：一般来说，我认为这是对其工作原理的一种理解，尽管本文中的第一个示例使其在无需鼠标的情况下仍然可用，但去除轮廓并不是您所能做的全部，您可以改为将其他样式属性添加到元素中，例如：添加边框，因此，很明显，元素被突出显示了，但它没有在页面上弹出荒谬的轮廓。这应该是公认的答案——因为隐藏轮廓是胡说八道。简单，但毫无意义：）