方法1:使用text-indent的負(fù)值,將內(nèi)容移出容器
例如:
<h1 class=”logo”><a href=”#”>logo</a></h1>
.logo>a{display:block;text-indent:-999px;}
此方法(非常不推薦)看起來(lái)蠻簡(jiǎn)單,但其實(shí)有幾個(gè)不理想的地方,1是比較吃資源;2是在ie5下面會(huì)出現(xiàn)滯后背景無(wú)法顯示;3是內(nèi)容為超鏈接時(shí),長(zhǎng)長(zhǎng)的黑色虛框,讓你抓狂。
方法2:使用display:none,將內(nèi)容隱藏
例如:
<h1 class=”logo”><a href=”#”><span>logo</span></a></h1>
.logo>a>span{display:none;}
此方法(不推薦)其實(shí)倒也不復(fù)雜,只是需要多添加一個(gè)標(biāo)簽,比較浪費(fèi);且display:none出現(xiàn)的幾率太多,對(duì)seo也是會(huì)有些許影響的。
方法3:使用padding將文字?jǐn)D出容器之外,并將超出的部分hidden
例如:
<h1 class=”logo”><a href=”#”><span>logo</span></a></h1>
.logo>a{display:block;width:200px;height:35px; overflow:hidden;}
.logo>a>span{padding-left:200px;}
方法4:使用font設(shè)置超小字體,達(dá)到隱藏內(nèi)容的目的
例如:
<h1 class=”logo”><a href=”#”>logo</a></h1>
.logo>a{font-size:0;}
/*部分瀏覽器設(shè)置為0不起作用,最好設(shè)置成下面的*/
.logo>a{font-size:0.01px;}
此方法(推薦)只需要將字體和行高設(shè)置為0,然后overflow:hidden就行;不過(guò)這樣在Safari和Chrome下還是會(huì)有1px高的字出現(xiàn),所以應(yīng)該再設(shè)置一下字體的顏色和背景圖相同或相近。以此就同樣可以達(dá)到隱藏內(nèi)容的目的,暫時(shí)還沒(méi)發(fā)現(xiàn)有什么副作用。
方法5:設(shè)置較大行高line-height,將內(nèi)容移出容器
例如:
<h1 class=”logo”><a href=”#”>logo</a></h1>
.logo>a{display:block;width:100px; height:25px; line-height:300px;}
此方法(推薦)兼容性比方法要好,支持一些特殊標(biāo)記的文字隱藏如button等。
方法6:設(shè)置文字顏色為transparent或者rgba(0,0,0,0)
例如:
<h1 class=”logo”><a href=”#”>logo</a></h1>
.logo>a{color:transparent;}
/*或者*/
.logo>a{color:rgba(0,0,0,0);}
此方法(推薦)但不支持ie8以下的瀏覽器,體驗(yàn)最好,并且用戶還可以選擇到文本。
新聞熱點(diǎn)
疑難解答
圖片精選