Div+Css实现隐藏文本内容的几种方法

在网页前端设计的过程中，我们很多时候需要隐藏特定的图片或者文字来实现一些功能，比如我们希望用统计代码而不希望统计图标显示在网页中，或者指定一些链接而不希望链接文字显示出来，这时就需要用DIV+CSS来实现了。
利用Div+Css实现隐藏文字内容主要有以下几种方法可用：

1、display:none：

这个是最方便方法，指定一个div，然后加上display:none属性，而且这样不会出bug。 经测试 ie6.0 、 7.0 、firefox 3.010 通过。但是遗憾的是，这样会多了个标签，循环中使用的话，html又多了一堆字节，所以单个按钮推荐这样使用。
而针对input value的隐藏这个方式就有些吃力了，所以还是只能用block加text-indent来“偏移”模拟隐藏了，完整代码为：

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

另外要注意的是，它可以使包括容器本身在内的东西都消失，简便且有效，但它有两个耳熟能详的缺陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽略，如果想隐藏文字但是又要被搜索引擎抓取的话不推荐用这个方法。

2、text-indent:-9999px：

text-indent是首行缩进，所以对于多行文本，若单独使用它就有明显的不足，需加上white-space:nowrap;来弥补不足，可是他有一个局限性 他只适用于块级元素block，而我们往往有时候想偏移掉的a上的字体，所以问题就来了：text-indent:-9999px;虽然用起来比较惬意，将a转化成block的话 往往他身后的的元素就被他赶到下一行了，如果正好这个a后面 是一个a按钮，就要用float浮动，这样有些麻烦。
还有一个问题：物理空间仍然存在，故还需设置line-height:0;或使用超小字体(在IE下有点BUG)，最终代码如下:

text-indent:-9999px;
white-space:nowrap;
line-height:0;

line-height:0：

这个方法能完美“隐藏”掉background之上的内容，经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过。

line-height:0;
font-size:0;
overflow:hidden;

4、overflow:hidden：

这是一个比较合理且是最喜欢的方法，具体代码如下:

display:block;
overflow:hidden;
width:300px;
height:100px;
padding:100px 0 0;
background:url();

display:block;
overflow:hidden;
width:300px;
height:100px;}
.replacement a{
padding:100px 0 0;
background:url();