淺析CSS隱藏頁面文字的幾種方式總結

方式一：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;   
}

4.可放到公用樣式中，單獨呼叫

.notext {   
    text-align: left;   
    letter-spacing: -3em;   
    overflow: hidden;   
}   
.notext:first-letter {   
    margin-left: -20em;   
}

#

以上是淺析CSS隱藏頁面文字的幾種方式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！