关于用隐藏文字（图片替换文字）的更好的可用性方法

有些文字或者效果很难用文字表示出来时我一般都是用图片或者css3来实现，关于css隐藏文字的方法很多，以前一般都用text-indent隐藏文字实现图片替换文字的方法，因为这种方法不影响机器或者搜索引擎搜索到文字，利于优化，但是今天看了一丝冰凉的文章，发现用这种方法也有很多的弊端。

显而易见，如果图片由于某些原因未加载的时候，设置了 text-indent：-999em导致文字移出了浏览器视口（可视区域），我们看到的会是一片空白。网页中最重要的是内容，显然此时的可用性大打折扣了。

从他的技术文章中学习经过总结到了另外一种方法：

<div class="box">
<h1><a href="" title="世界工厂网">世界工厂网</a></h1>
</div>

用相对定位及content方法实现

<style type="text/css">
*{margin:0;padding:0; text-indent:}
.box h1{ height:50px; width:205px; overflow:hidden;

*background:#fff url(images/logo.png) no-repeat 0 0; //解决ie6，ie7中不兼容的问题,主要是logo图片不显示，加上背景颜色主要是解决ie6和ie7中不能遮住文字问题

}
.box a{ position:relative; z-index:-1; zoom:1;}
.box a:before { content:url(images/logo.png); display:inline-block;}
</style>

用overflow:hidden方法实现

.box h1{ height:50px; width:205px; overflow:hidden;background: url(http://cn-style.gcimg.net/v6/css/common/images/logo.png) no-repeat 0 0;}
.box a{ height:0; line-height:0; overflow:hidden; display:block; }

用line-height方法实现

.box h1{ height:50px; width:205px; overflow:hidden;background: url(http://cn-style.gcimg.net/v6/css/common/images/logo.png) no-repeat 0 0; }
.box a{ display: block;overflow: hidden;height: 50px;line-height: 180px; }

总的来说我觉得第一种实现方法比较好点，它避免了很多弊端，能学到那么多，要感谢一丝冰凉的分享，由于自己的理解能力有限，只能总结那么多