html - 使用 CSS 隐藏文本，最佳实践？

Question

假设我有这个用于显示网站 Logo 的元素:

<div id="web-title">
  <a href="http://website.com" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>

#web-title 将使用 background:url(http://website.com/logohere.png) 设置样式，但如何正确隐藏文本网站名称？如此处所示:Hide text using css或这里 https://stackoverflow.com/a/2705328 ，我见过各种隐藏文本的方法，例如:

#web-title span { text-indent: -9999px; }

或

#web-title span { font-size: -9999px; }

或

#web-title span { position: absolute; top: -9999px; left: -9999px; }

我也见过一些将这三种方法结合起来的。但实际上哪一个是有效隐藏文本的最佳做法？

Answer 1

其实最近有一个新技术出来了。本文将为您解答:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

它是可访问的，并且比 -99999px 具有更好的性能。

更新:正如@deathlock 在评论区提到的，上述修复程序的作者 ( Scott Kellum ) 建议使用 transparent font : http://scottkellum.com/2013/10/25/the-new-kellum-method.html .