HTML5Boilerplate 和图像替换类 text-indent -999em
我的大部分项目都使用 HTML5Boilerplate，因为它是一个很棒的框架，但我和其他开发人员一直在讨论图像替换类和文本缩进：-999em 的使用。
他向我发送了这两个链接：
http://luigimontanez.com/2010/stop-using-文本缩进-css-trick/
http://www.youtube.com/watch?v=fBLvn_WkDJ4
我知道 HTML5Boilerplate 团队做了很多研究他们将样式表放在一起，我知道这是许多开发人员使用的常用技术。大家觉得怎么样？我应该开始使用另一种技术，这样我们的网站就不会受到惩罚，还是可以继续使用它？
谢谢！
I have been using HTML5Boilerplate for most of my projects, as it is a great framework but me and the other developer have been going back and forth about the image replacement class and the use of text-indent:-999em.
He sent me these two links:
http://luigimontanez.com/2010/stop-using-text-indent-css-trick/
http://www.youtube.com/watch?v=fBLvn_WkDJ4
I know the HTML5Boilerplate team did a lot of research when they put together the stylesheet, and I know it is a common technique that a lot of developers use. What do you guys think of it? Should I start using another technique so our sites don't get penalized or is it OK to keep using it?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这两个链接都专门指徽标，其中最语义化的路线是将徽标添加为具有 alt 属性的图像标签：
它们不涵盖您可能想要使用普通旧图像替换的情况。随着嵌入字体变得越来越普遍和受支持，图像替换不再是一个问题，因为它不太常见，但是，在许多情况下，唯一的出路就是使用替换图像。
这在标题上尤其常见，因为艺术家往往想要华丽的装饰。
如果可能，请使用带有 alt 属性的内联图像，因为这是最语义化的显示方式。问题是，如果您使用 CMS，您可能无法直接访问标记，因此在许多情况下，解决办法是使用 CSS 或 JS 图像替换。
如果您必须使用CSS，不必太担心
text-indent: -9999px;。合法的替代品不会让你被谷歌列入黑名单，只是不要试图通过试图向用户隐藏只有谷歌可见的内容来欺骗系统。Both of those links refer specifically to Logos, where the most semantic route is to add the logo as an image tag with an alt attribute:
What they don't cover are cases where you might want to use plain old image-replacement. As embedding fonts is becoming more common and supported, image replacement is less of an issue as it's less common, however, there are still many cases when the only way out is to use a replacement image.
It's particularly common on headers as artists tend to want fancy flourishes.
If possible, use an inline image with an alt attribute, as that's the most semantic way of showing it. The catch is that you may or may not have direct access to the markup if you're using a CMS, so in many cases, the way out is to use a CSS or JS image replacement.
If you must use CSS, don't worry too much about
text-indent: -9999px;. A legitimate replacement wont get you blacklisted from Google, just don't try to game the system by trying to hide content from users that's only visible to Google.