方式一：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復制內容到剪貼板

<style type="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>   
<div class="btn">   
 <a class="btn_download" href="#" title="下載">下載</a>   
</div>  

方式四：letter-spacing+first-letter
1.此方法兼容IE6+, 適用于inline-block水平元素，且適用于button元素，不過，需要是下面這種寫法

CSS Code復制內容到剪貼板

<button type="button/submit">按鈕</button>  

而不能是這樣子：

CSS Code復制內容到剪貼板

<input type="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;