方式一：text-indent:-9999px

不多说，ext-indent负值为最常用方法，然问题有三：

1.较大的负值有性能问题，例如新浪/腾讯微博提交按钮的-9999em，大概12~16万像素的宽度，相对于100个显示器宽度，在低配Android pad上，尤其含动画效果的时候，会直接卡爆；

2.FireFox浏览器下虚框。其实问题不大，overflow:hidden可修复；

3.不能应用在IE6/IE7伪inline-block水平元素上，否则元素会被text-indent拐走。

即使有人提出：

CSS Code复制内容到剪贴板 {text-indent:100%;white-spacing:nowrap;overflow:hidden;}

除了性能有所缓解，后面两个问题依旧存在。

方式二：font-size:0

此方式在没有给容器设置height 或者行高的情况下，设置font-size:0,则容器将无高度

方式三：设置padding,撑开容器

CSS Code复制内容到剪贴板 <styletype="text/css"> .btn{height:22px;width:55px;overflow:hidden;} .btn_download{display:inline-block;width:55px;height:22px;padding-top:22px;background:url(btn_download.gif)no-repeat;text-align:center;} </style> <divclass="btn"> <aclass="btn_download"href="#"title="下载">下载</a> </div>

方式四：letter-spacing+first-letter

1.此方法兼容IE6+, 适用于inline-block水平元素，且适用于button元素，不过，需要是下面这种写法

CSS Code复制内容到剪贴板 <buttontype="button/submit">按钮</button>

而不能是这样子：

CSS Code复制内容到剪贴板 <inputtype="button/submit"value="按钮"/>

2.此方法受text-align属性影响。

text-align:left;letter-spacing+first-letter的margin使用负值，

text-align:right;letter-spacing+first-letter的margin需要使用正值。

值的大小其实没有定值。一般，letter-spacing绝对值大于2em可以，首字符margin可以大一些，demo中是-20em.

3.多个:first-letter伪元素不要使用逗号分隔，貌似会全部失效，应分开写使用逗号分隔的时候逗号前面一定要留一个空格。否则，IE6浏览器会忽略这条声明：

CSS Code复制内容到剪贴板 .btn:first-letter, .img:first-letter{ margin-left:-20em; } .btn:first-letter,/*逗号前需有1个空格*/ .img:first-letter{ margin-left:-20em; }

4.可放到公共样式中，单独调用

CSS Code复制内容到剪贴板 .notext{ text-align:left; letter-spacing:-3em; overflow:hidden; } .notext:first-letter{ margin-left:-20em; }