在制作一些类似按钮的标签时，我们经常用到的标签无非是a或者input，当然也可以用span，var ，i 等html标签。效果如下图，我们为了方便机器阅读和搜索引擎的抓取，会对标签进行必要的文字说明。在给标签设置宽高的同时，还需要设置背景，最重要的是需要让文字隐藏，这也是我们这篇文章所要阐述的，下面说明主要的方法：

万能的方法一：text-indent:-9999em（这里的数字可变）

<style>
.btn{display:block;width:125px;height:40px;background:url(images/btn_20130105.png) no-repeat;overflow:hidden;text-indent:-9999em;}
.btn_b{border:none;}
</style>

<a class="btn_a btn">我要咨询</a>
<input type="button" value="我要咨询" class="btn_b btn" />

方法说明：适合a，input等各标签。但此种方法只能设置标签的display:block，而不能采用
display:inline-block，否则在ie6下标签会消失不见。

万能方法二：line-height:500px;（这里的数字可变）font-size:0;

<style>
.btn{display:block;width:125px;height:40px;background:url(images/btn_20130105.png) no-repeat;overflow:hidden;line-height:500px;font-size:0;}
.btn_b{border:none;}
</style>

<a class="btn_a btn">我要咨询</a>
<input type="button" value="我要咨询"  class="btn_b btn" />

方法说明：适合a，input等各标签。此种方法咋看上去font-size:0是多余，因为line-height:500px已经超过标签的高度，然后我们设置了overflow:hidden，按理说不用font-size:0也不会出现文字的。但是在ff中，无法设置input里面的行高（line-height）,所以在此加了font-size:0属性，才使得文字效果与别的浏览器表现一致。

小瑕疵方法：font-size:0;line-height:0;

<style>
.btn{display:block;width:125px;height:40px;background:url(images/btn_20130105.png) no-repeat;overflow:hidden;font-size:0;line-height:0;}
.btn_b{border:none;}
</style>

<a class="btn_a btn">我要咨询</a>
<input type="button" value="我要咨询" class="btn_b btn" />

方法说明：适合a等各标签，几乎支持 input标签。这里说几乎支持是因为input在ie6或者7下会出现小黑点的情况。如图是放大网页4倍的情况：