用CSS隐藏文本，最佳实践？
比方说，我有这个元素来显示网站的标志：
<div id="web-title"> <a href="http://website.com" title="Website" rel="home"> <span>Website Name</span> </a> </div> #blog-title将被设置为background:url(http://website.com/logohere.png) ，但如何正确隐藏文本Website Name ？ 正如在这里看到的： 隐藏文本使用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; }
我也看到一些结合这三种方法。 但实际上哪一个是有效隐藏文本的最佳做法？
实际上，最近出现了一种新的技术。 本文将回答您的问题： 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 ）的作者build议使用透明字体 ： http ://scottkellum.com/2013/10/25/the-new-kellum-method .html 。
你可以简单地使它透明
{ width: 20px; height: 20px; overflow: hidden; color:transparent; }
你不能简单地使用display: none; 喜欢这个
HTML
<div id="web-title"> <a href="http://website.com" title="Website" rel="home"> <span class="webname">Website Name</span> </a> </div>
CSS
.webname { display: none; }
或者如果你关心预留空间的话，怎么玩能见度呢？
.webname { visibility: hidden; }
大多数开发者将要做的是：
<div id="web-title"> <a href="http://website.com" title="Website" rel="home"> <span class="webname">Website Name</span> </a> </div> .webname { display: none; }
我也曾经这样做过，直到我意识到你隐藏了设备的内容。 又名屏幕阅读器等。
所以通过：
#web-title span {text-indent: -9000em;}
你确保文本仍然是可读的。
将.hide-text类添加到包含文本的跨度中
.hide-text{ display:none; }
或使文本透明
.hide-text{ color:rgba(0,0,0,0); }
根据您的使用情况使用。
如果你愿意在你的标记中容纳这个（就像你在持有文本的问题中一样），那么我会使用CSS助手中的任何jQuery UI：
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
如果你绝对拒绝添加额外的标记来隐藏在图像的容器中的文本，图像replace技术是很好的。
什么谷歌（search机器人）需要相同的内容应该送达机器人，因为它是送达用户。 将文本缩进（任何文本）让机器人认为它是垃圾邮件，或者您正在向用户和机器人提供不同的内容。
最好的方法是直接在标签中使用logo作为图像。 给你的图像“alt”。 这将是完美的机器人阅读，也将有助于图像search。
这是直接从马的嘴里： http : //www.youtube.com/watch?v=fBLvn_WkDJ4
截至2015年9月，最常见的做法是使用以下CSS：
.sr-only{ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; }
我这样做：
.hidden-text { left: 100%; display: inline-block; position: fixed; }
我意识到这是一个老问题，但Bootstrap框架有一个内置的类（sr-only）来处理除屏幕阅读器之外的所有内容的隐藏文本：
<a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>
