26

这篇文章说我们应该避免使用这种技术。这个说厉害了 Google 会在 CSS 文件中查找text-indent: -9999px;并惩罚您，这是真的吗？:|

我经常使用该属性来隐藏文本。例如，我有一个由图标表示的按钮：

<a href="#" class="mybutton">do Stuff</a>

CSS：

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

我没有看到任何替代我的代码的方法。如果我用图像替换它，我会自动为每个按钮图像获得 +20 HTTP 请求。

如果我将链接设为空，则它的可访问性会降低，因为屏幕阅读器不会知道那是什么。空链接看起来很奇怪，可能谷歌也不喜欢这样......

那么处理这种情况的最佳方法是什么？

4

5 回答 5

24

不使用 -9999px 方法的一个很好的理由是浏览器必须为每个应用此方法的元素绘制一个 9999px 的框。显然，这可能会对性能造成很大影响，尤其是当您将其应用于多个元素时。

替代方法包括这个（来自zeldman.com）：

text-indent: 100%; white-space: nowrap; overflow: hidden;

...或者（从这里）：

height: 0; overflow: hidden; padding-top: 20px;

（其中 'padding-top' 是您希望元素达到的高度）。

我认为第一种方法更简洁，因为它可以让您以正常方式设置高度，但我发现第二种方法在 IE7 中工作得更好

于 2012-09-05T17:14:47.630 回答
5

我读到谷歌没有宣传text-indent在锚标签上使用否定词的概念 - http://maileohye.com/html-text-indent-not-messing-up-your-rankings/。理想情况下，您应该使用标题标签和 rel 属性来告诉搜索引擎更多关于链接的信息。

此外，您可能想阅读这些线程：

站点地图、机器人、尽可能使用 rel 和标题标签的锚标签以及将 alt 标签应用于您的图像应该有助于改善 SEO。

谷歌现在还使用 shebang (#!) 运算符遍历 AJAX 驱动的内容，所以也许这是你想要阅读的内容 - http://www.seomoz.org/blog/how-to-allow-google-to -crawl-ajax-内容

使用 HTML5 和 JQuery，有许多插件允许书签和 Ajax 链接的深度链接。

希望这可以帮助。

于 2012-01-23T12:07:54.003 回答
3

对于操作按钮，文本缩进技巧应该是可以的，如果您希望搜索引擎在权衡目标页面的页面排名时考虑链接文本，则可能不太好。

顺便说一句，我坚信 Google 在将您的标记视为垃圾邮件之前会使用多种启发式方法，因此您应该随意使用文本缩进。

于 2012-01-23T11:58:12.243 回答
2

我不知道谷歌是否有问题（虽然你链接到谷歌员工博客文章的链接的文章，所以有一定的分量），但我认为另一种选择是使用<img>带有透明 GIF 的标签，而你的精灵作为它的background-image：

HTML

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

标签上的背景图像<img>工作可靠，即使在 IE 6 中也是如此。

当然，谷歌试图做的是避免索引不可见的文本，alt文本也不可见。但也许它会避免您的页面可能被谷歌算法标记为垃圾邮件的风险。

如果用户在浏览器中禁用图像，这种方法至少会导致显示文本，但text-indent事实并非如此。

于 2012-01-23T12:01:35.313 回答
1

那么有一个替代方案（我经常使用）。

<a href="#" class="mybutton"><span>do Stuff</span></a>

您可以根据上下文将 span 更改为 strong/h1 等。

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}
于 2012-01-23T12:10:49.733 回答