這篇文章主要介紹了CSS隱藏文字的6種方法,均通過各種上瀏覽器測試,當(dāng)然,你可以綜合3種方法一起用,需要的朋友可以參考下。

作為一個web前端開發(fā)，為了html語義化，常常要給內(nèi)容模塊加上一些標(biāo)題來讓頁面更有意義，當(dāng)然還有我們的圖片按鈕，在拋開css裸奔的情況下也能很順利的汲取到頁面信息，通常為了傳達更好的視覺效果，我們常用圖片替代掉字體，而早前的前端開發(fā)常直接不在html中給出內(nèi)容，用&nbsp；（甚至為空），這樣在沒有加載到css時就無法知道這個區(qū)塊究竟是什么內(nèi)容了

正題開始,通常偏移掉字體的方式是:

一、使用text-indent:-9999px;

可是他有一個局限性他只適用于塊級元素block，而我們往往有時候想偏移掉的a上的字體，所以問題就來了，text-indent:-9999px;雖然用起來比較愜意，將a轉(zhuǎn)化成block的話往往他身后的的元素就被他趕到下一行了，如果正好這個a后面是一個a按鈕，就要用float來浮動以使他身后再出現(xiàn)簇?fù)碚?，這樣是不是有些麻煩呢

二、使用line-height:0;

代碼如下:

font-size:0;

overflow:hidden;

能完美“隱藏”掉你background之上的字體

經(jīng)測試ie6.0、7.0、8.0、firefox3.010通過

三、最方便的是加個span，然后display:none，而且這樣不會出bug。

遺憾的是，多了個標(biāo)簽，循環(huán)中使用的話，html又多了一堆字節(jié)，單個按鈕推薦這樣使用。

而針對inputvalue的隱藏這個方式就有些吃力了

所以還是只能用block加text-indent來“偏移”模擬隱藏了

display:block;

font-size:0;

line-height:0;

text-indent:-9999px;

經(jīng)測試ie6.0、7.0、firefox3.010通過

四、display:none：它可以使包括容器本身在內(nèi)的東西都消失，簡便且有效，但它有兩個耳熟能詳?shù)娜毕?，那就是對搜索引擎不友好，且被屏幕閱讀器所忽略。

五、overflow:hidden：

這是一個比較合理且我最喜歡的方法(腳本之家站長注)，具體代碼如下:

以下為引用的內(nèi)容：

代碼如下:

.texthidden{

display:block;/*統(tǒng)一轉(zhuǎn)化為塊級元素*/

overflow:hidden;

width:0;

height:0;

}

六、positon:absolute：

用絕對定位將其推出可視區(qū)，不過雖然可視性不存在，但仍占據(jù)物理空間，與隱藏文字的宗旨相背

以下為引用的內(nèi)容：

代碼如下:

.texthidden{

positon:absolute;

margin-top:-9999px;

margin-left:-9999px;

}

注：后面的3種方法雖然也可以實現(xiàn)隱藏文字效果,但不推薦。

更多信息請查看IT技術(shù)專欄