方式一：text-indent:-9999px
#不多說，ext-indent負值為最常用方法，然問題有三：
1.較大的負值有效能問題，例如新浪/騰訊微博提交按鈕的-9999em，大概12~16萬像素的寬度，相對於100個顯示器寬度，在低配Android pad上，尤其含動畫效果的時候，會直接卡爆；
2.FireFox瀏覽器下虛框。其實問題不大，overflow:hidden可修復；
3.不能應用在IE6/IE7偽inline-block水平元素上，否則元素會被text-indent拐走。
即使有人提出：
{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }除了性能有所緩解，後面兩個問題依舊存在。
方式二：font-size:0
此方式在沒有給容器設定height 或行高的情況下，設定font-size:0,則容器將無高度
方式三：設定padding,撐開容器
<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>
<p class="btn">
<a class="btn_download" href="#" title="下载">下载</a>
</p>方式四：letter-spacing+first-letter
1.此方法相容於IE6+, 適用於inline-block水平元素，且適用於button元素，不過，需要是下面這種寫法
<button type="button/submit">按钮</button>
而不能是這樣子：
<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瀏覽器會忽略這條宣告：
.btn:first-letter,
.img:first-letter {
margin-left: -20em;
}
.btn:first-letter , /* 逗号前需有1个空格 */
.img:first-letter {
margin-left: -20em;
}.notext {
text-align: left;
letter-spacing: -3em;
overflow: hidden;
}
.notext:first-letter {
margin-left: -20em;
}#
以上是淺析CSS隱藏頁面文字的幾種方式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
