css – 负文本缩进导致点击的链接选择很大

前端之家收集整理的这篇文章主要介绍了css – 负文本缩进导致点击的链接选择很大前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我经常用来创建使用图像的好SEO链接方法是文本缩进:-9999px;招.基本上,我创建一个具有背景图像的块级锚点.我将其文本缩进设置为一个大的负数,所以你看不到它,这对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...;
  }

上面的代码将95%的时间只有当你点击100 x 100px区域的链接的轮廓.然而,当没有定义父母的维度时,它似乎是拍摄页面….我想.但是在这种情况下,它在父母方面有一些尺寸,但仍然在页面上.结果,我做了一个跨度{display:none; }技巧,但我想知道如何使用文本缩进技巧,但修复大纲.

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

解决方法

这是一个 great article,用于删除Firefox中被诅咒的大纲

只是添加一个链接觉得很懒惰,所以这里添加到你的CSS:

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

猜你在找的CSS相关文章