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

这样可以保持轮廓边框，但只能保留在元素的指定坐标中。

在div上应用overflow: hidden或outline: none {{1}}，将完全删除可用性问题的大纲。

Answer 2

添加溢出：隐藏在你的div上

Answer 3

这是great article用于删除firefox

中被诅咒的大纲

只是添加一个非常懒的链接，所以在这里，将其添加到您的CSS中：

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

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

3 个答案: