文本缩进:-9999px是一种用图像替换文本的糟糕技术,有哪些替代方案？

Question

这篇文章说我们应该避免使用这种技术.这个说它很棒.谷歌在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请求.

如果我将链接设置为空,则它的访问次数较少,因为屏幕阅读器不会知道它是什么.空链接看起来很奇怪,可能Google也不喜欢这样......

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

Answer 1

不使用-9999px方法的一个很好的理由是浏览器必须为应用它的每个元素绘制一个9999px的框.显然,这可能会造成相当大的性能损失,特别是如果您将其应用于多个元素.

替代方法包括这个(来自zeldman.com):

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

......或者(从这里):

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

(其中'padding-top'是你想要元素的高度).

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

Answer 2

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

此外,您可能想要阅读这些线程:

• http://www.google.com/support/forum/p/Webmasters/thread?tid=1a51b7310162d1aa&hl=en

• http://websitedesigningtips.com/5-tips-web-designers-developers-optimize-site-search-engines/(最后一点)

在可能的情况下使用rel和title标签的站点地图,机器人,锚标签以及对图像应用alt标签应该有助于更好地进行搜索引擎优化.

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

使用HTML5和JQuery,有许多插件允许书签和Ajax链接的深层链接.

希望这可以帮助.