text-indent: -9999px 是用图像替换文本的一种不好的技术，还有哪些替代方法？答案

【问题标题】：Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?text-indent: -9999px 是用图像替换文本的一种不好的技术，还有哪些替代方法？
【发布时间】：2012-02-16 18:34:43
【问题描述】：

This article 说我们应该避免使用这种技术。 This one 说它很棒。 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 请求。

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

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

【问题讨论】：

您可以随时使用padding-top: 9999px 和overflow: hidden。
据我所知，它是一个滑坡——如果你不过度使用它，它似乎没问题——但由于谷歌没有“官方”声明，我尽量避免它，但我最好的猜测是谷歌不会惩罚它，而是将其中的任何内容（远）排在页面上的任何其他内容之前，也许像 <a title="do stuff" href="#" class="mybutton"></a> 这样的东西“更好”，但很难确定。 ..
另一种选择是使用伪元素，如this article 中所述。

标签： html css seo text-indent

【解决方案1】：

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

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

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

...或者（来自here）：

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

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

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

【讨论】：

white-space: nowrap; 有什么用处？
否则，只有第一个单词会被隐藏。随后的单词将换行到下一行并可见。

【解决方案2】：

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

另外，您可能想阅读以下主题：

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

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

使用 HTML5 和 JQuery，有许多插件可以为 Ajax 链接添加书签和深度链接。

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我不知道谷歌是否有问题（虽然你链接到的文章链接到a blog post from a Google employee，所以这有一定的分量），但我认为替代方法是使用带有透明 GIF 的<img> 标签，和你的精灵作为它的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 文本也不可见。但也许它可以避免您的页面可能被 Google 算法标记为垃圾邮件的风险。

如果用户在浏览器中禁用图像，这种方法至少会显示文本，text-indent 不会。

【讨论】：

我认为，当您希望为屏幕阅读器用户提供标记文本的完整 HTML 体验时，大问题就出现了，而您无法使用 alt 或 title 属性来做到这一点。 HTML5 废弃了 longdesc 属性并建议使用 aria- describeby 。但是，如果您不希望视力正常的用户必须阅读他们自己可以清楚地看到的图像的描述，那么唯一的解决方案是使用文本缩进或类似技术将描述放置在视口之外。跨度>
啊，是的，如果您有超出简单标签的文本，那么这是行不通的。我不确定图像替换多久会发生这种情况，因为您希望图标的标签相当短。

【解决方案5】：

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

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

【讨论】：

.mybutton span {display: none;} 将对屏幕阅读器和其他浏览器隐藏<span> 的内容。 text-indent: -9999px 的想法是屏幕阅读器仍然可以阅读文本，即使它位于屏幕外。
同意，这可能不是更好的解决方案。
Google 可能不会索引 display:none 项目...它被认为是垃圾索引的原始形式。