原文連結： 　　http://ajhcc.blogbus.com/logs/41836252.html 　　建站過過程中朋友喜歡把網站名稱用H1表示,但從美觀考慮，要用logo圖片來代替h1，這時需要隱藏h1內的這段文字，但又不能對搜尋引擎不友好，否則就失去了定義h1標籤的意義。 　　在CSS中如何以圖代字，找了一下CSS隱藏文字的方法，有以下幾條： 　　1、display:none; 　　這個大家普遍說法是，搜尋引擎可能認為被隱藏的文字屬於垃圾資訊而被忽略，不為隱藏的物件保留物理佔位空間。GG也搜CSS檔案？不過如果用這個方法，<h1>如何設計，也是難題。 　　2、visibility:hidden; 　　和display:none;相對應，為隱藏的物件保留物理佔位空間。 　　3、overflow:hidden; 　　這是網上用的最多的方法，但是我認為對於隱藏h1標籤的“站點名稱”文字，不太合適，原因我在最後說。 　　.texthidden{ 　　display:block; 　　overflow:hidden; 　　width:0; 　　height:0; 　　} 　　4、positon:absolute; 　　用絕對定位將其推出可視區，不過雖然可視性不存在，但仍佔據物理空間，與隱藏文字的宗旨相背，另外我個人不喜歡用絕對座標定位magin這個屬性，margin在不同瀏覽器中總是帶來不可預料的Bug。 　　.texthidden{ 　　positon:absolute; 　　margin-top:-9999px; 　　margin-left:-9999px; 　　} 　　5、text-indent:-9999px； 　　把h1作為一個塊來顯示（display:block;），指定長寬（和圖片一樣大小），然後指定h1的背景圖片，也就是將我們需要的圖片作為h1這個標籤的背景。而h1標籤中插入的，仍然是作為字元形式出現的部落格標題，然後用text-indent:-9999px;將文字甩到螢幕看不到的地方，9999px應該是足夠了，誰的螢幕也沒那麼大吧。 　　h1a{ 　　height:30px; 　　width:165px; 　　float:left; 　　text-indent:-9999px; 　　background-image:url(images/logo.gif); 　　background-repeat:no-repeat; 　　display:block; 　　position:relative; 　　} 　　<h1> 　　<ahref=http://www.seo100.net/>百度優化</a> 　　</h1> 　　總結一下： 　　如果不考慮搜尋引擎的因素，方案一無疑最佳的，適合內網站點使用，並不是一無是處。 　　方案二，可以用在特殊的佔位場合，瞭解一下，沒壞處。 　　方案三，網上都說好，如果不是h1標籤，還真可以用它。 　　方案四，嗯，前面說我不喜歡。 　　方案五，在h1使用上語義明確，符合語義化定義。text-indent就是首行縮排，大家都在中文段落，首行空兩格用過它。這裡通過負值縮排，使文字超出可視區，而這時h1下的背景就顯示出來了，h1中包含的<a>標籤又不影響使用，對於隱藏文字“站點名稱”應該是最佳方案了。但對於多段文字的隱藏這個方法就不適合了。 　　這裡還有個問題，就是點選<h1><a>連結時，會產生一個虛線框，對於IE還好，沒什麼問題，虛線框只是在背影圖片大小。但是Firefox就有些麻煩，它把縮排的文字範圍也包含進來了，這樣不是很美觀。 　　於是需要屏掉點選時產生的虛線框，IE和FF屏虛線框方法不一樣。IE採用的遍歷方法(HTC,css表示式)有些耗系統資源，正好我們只需要隱藏FF下的虛線框就行了，IE就不管了，說一下Firefox如何去掉連結的虛線框的方法。 　　a{ 　　outline:none;/*去掉Firefox點選時產生的虛線框*/ 　　}

-9999px 使瀏覽器畫一個9999寬的盒子... 會降低一些效能。

更有效率的方法（試過了，h1也能用）：

.hide-text {
text-indent: 100%;
white-space: nowrap;overflow: hidden;
}