CSS隱藏頁面文字的幾種方式總結(jié)

2024-07-11 08:32:47

字體：大中小

供稿：網(wǎng)友

方式一：text-indent:-9999px
不多說，ext-indent負(fù)值為最常用方法，然問題有三：
1.較大的負(fù)值有性能問題，例如新浪/騰訊微博提交按鈕的-9999em，大概12~16萬像素的寬度，相對于100個(gè)顯示器寬度，在低配Android pad上，尤其含動(dòng)畫效果的時(shí)候，會(huì)直接卡爆；
2.FireFox瀏覽器下虛框。其實(shí)問題不大，overflow:hidden可修復(fù)；
3.不能應(yīng)用在IE6/IE7偽inline-block水平元素上，否則元素會(huì)被text-indent拐走。
即使有人提出：

CSS Code復(fù)制內(nèi)容到剪貼板

{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }

除了性能有所緩解，后面兩個(gè)問題依舊存在。

方式二：font-size:0
此方式在沒有給容器設(shè)置height 或者行高的情況下，設(shè)置font-size:0,則容器將無高度

方式三：設(shè)置padding,撐開容器

CSS Code復(fù)制內(nèi)容到剪貼板

<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復(fù)制內(nèi)容到剪貼板

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

而不能是這樣子：

CSS Code復(fù)制內(nèi)容到剪貼板

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

2.此方法受text-align屬性影響。
text-align:left;letter-spacing+first-letter的margin使用負(fù)值，
text-align:right;letter-spacing+first-letter的margin需要使用正值。
值的大小其實(shí)沒有定值。一般，letter-spacing絕對值大于2em可以，首字符margin可以大一些，demo中是-20em.
3.多個(gè):first-letter偽元素不要使用逗號分隔，貌似會(huì)全部失效，應(yīng)分開寫使用逗號分隔的時(shí)候逗號前面一定要留一個(gè)空格。否則，IE6瀏覽器會(huì)忽略這條聲明：

CSS Code復(fù)制內(nèi)容到剪貼板

上一篇：老生常談CSS中的長度單位

下一篇：CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問題講解

發(fā)表評論

共有條評論