常见的CSS隐藏文字方法(转)

对于隐藏文字 & 内容，网上已有不少CSS方法可以实现，现总结几条实用的隐藏效果如下：
假如需要隐藏的对象是：
<h1 id="header"><span class="texthidden">this text need to be hidden.</span></h1>
隐藏这一部分的css方法一般有六种：
1、display:none;
/* 它可以使包括容器本身在内的东西都消失，简便且有效，但它有两个耳熟能详的缺陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽略。将对象完全性隐藏。 */
e.g: #header { display:none; width:300px; height:40px; line-height:40px;}
2、visibility: hidden;
/* 隐藏了对象内容，却保留了它的物理空间来占位。 */
e.g: #header { visibility:hidden; width:300px; height:40px; line-height:40px;}
3、text-indent:-10000px;
/* text-indent是首行缩进，所以对于多行文本，若单独使用它就有明显的不足，需加上white-space:nowrap;来弥补不足，但还有一个问题：物理空间仍然存在，故还需设置line-height:0;或使用超小字体(在IE下有点BUG)。*/
最终代码：.texthidden { text-indent:-9999px; white-space:nowrap; line-height:0;}
4、overflow:hidden; 
/* 对文字溢出时的自动隐藏处理 （不显示超过对象尺寸的内容 ）*/
这种方法可以与前几种配合使用，于是就会有如下方法：
（1）text-indent：
#header { width: 300px; height: 40px; background-image: url(1.jpg); text-indent: -200em; overflow: hidden;}
/* 标签中的文字的文本缩进设置成足够大的值，并且设置容器h1的overflow的值为hidden。实现了图像替换。 */
（2）height:0; width:0;
#header { width: 300px; height: 40px; background-image: url(1.jpg);}
#header span { display: block; width: 0; height: 0; overflow: hidden;}
5、font-size:1px;
/* 将h1的文字的大小设为1px，颜色设置成与背景图片接近的颜色，也同样实现了CSS图像替换的效果，但此效果需要在特定的背景图片下才显得完美，不然就容易看出来了。*/
#header { width: 300px; height: 40px; background-image: url(1.jpg); font-si