HTML5Boilerplate和图像替换类text-indent -999em

Question

我在我的大多数项目中都在使用HTML5Boilerplate，因为它是一个很棒的框架，但我和其他开发人员一直在反复讨论图像替换类和文本缩进：-999em的使用。

他给我发了这两个链接：

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

http://www.youtube.com/watch?v=fBLvn_WkDJ4

我知道HTML5Boilerplate团队在组装样式表时做了很多研究，我知道这是许多开发人员使用的一种常见技术。你们觉得怎么样？我是否应该开始使用另一种技术，这样我们的网站就不会受到惩罚，或者继续使用它可以吗？

谢谢!

Answer 1

这两个链接都特别涉及徽标，其中最具语义的路线是将徽标添加为具有alt属性的图像标签：

<img src="/path/to/logo.png" alt="Foo bar baz! The best way to fizz buzz" />

他们没有涵盖的是您可能想要使用普通的旧图像替换的情况。随着嵌入字体变得越来越普遍和受支持，图像替换不再是一个问题，因为它不太常见，然而，仍然有许多情况下，唯一的解决办法是使用替换图像。

这在标题中特别常见，因为艺术家往往想要花哨的花哨。

如果可能，使用具有alt属性的内联图像，因为这是显示它的最具语义的方式。问题是，如果您正在使用CMS，则可能无法直接访问标记，因此在许多情况下，解决方法是使用CSS或JS图像替换。

如果你必须使用CSS，不要太担心text-indent: -9999px;。一个合法的替代品不会让你被谷歌列入黑名单，只是不要试图通过试图向用户隐藏只有谷歌才能看到的内容来玩弄系统。