CSS text-indent: -9999px;

   建站過過程當中朋友喜歡把網站名稱用H1表示,但從美觀考慮，要用logo圖片來代替h1，這時須要隱藏h1內的這段文字，但又不能對搜索引擎不友好，不然就失去了定義h1標籤的意義。

   在CSS中如何以圖代字，找了一下CSS隱藏文字的方法，有如下幾條：

   一、display:none;

   這個你們廣泛說法是，搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略，不爲隱藏的對象保留物理佔位空間。GG也搜CSS文件？不過若是用這個方法，<h1>如何設計，也是難題。

   二、visibility:hidden;

   和display:none;相對應，爲隱藏的對象保留物理佔位空間。　　

   三、overflow:hidden;

   這是網上用的最多的方法，可是我認爲對於隱藏h1標籤的「站點名稱」文字，不太合適，緣由我在最後說。

.texthidden{
　　display:block;
　　overflow:hidden;
　　width:0;
　　height:0;
}

　　四、positon:absolute;

　　用絕對定位將其推出可視區，不過雖然可視性不存在，但仍佔據物理空間，與隱藏文字的宗旨相背，另外我我的不喜歡用絕對座標定位magin這個屬性，margin在不一樣瀏覽器中老是帶來不可預料的Bug。

.texthidden{
　　positon:absolute;
　　margin-top:-9999px;
　　margin-left:-9999px;
}

　　五、text-indent:-9999px；

　　把h1做爲一個塊來顯示（display:block;），指定長寬（和圖片同樣大小），而後指定h1的背景圖片，也就是將咱們須要的圖片做爲h1這個標籤的背景。而h1標籤中插入的，仍然是做爲字符形式出現的博客標題，而後用text-indent:-9999px;將文字甩到屏幕看不到的地方，9999px應該是足夠了，誰的屏幕也沒那麼大吧。

h1 a{
　　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.jshelp.cn/>js助手</a>

　　</h1>

　　在h1使用上語義明確，符合語義化定義。text-indent就是首行縮進，你們都在中文段落，首行空兩格用過它。這裏經過負值縮進，使文字超出可視區，而這時h1下的背景就顯示出來了，h1中包含的<a>標籤又不影響使用，對於隱藏文字「站點名稱」應該是最佳方案了。但對於多段文字的隱藏這個方法就不適合了。

　　這裏還有個問題，就是點擊<h1><a>連接時，會產生一個虛線框，對於IE還好，沒什麼問題，虛線框只是在背影圖片大小。可是Firefox就有些麻煩，它把縮進的文字範圍也包含進來了，這樣不是很美觀。

　　因而須要屏掉點擊時產生的虛線框，IE和FF屏虛線框方法不同。IE採用的遍歷方法(HTC,css表達式)有些耗系統資源，正好咱們只須要隱藏FF下的虛線框就好了，IE就無論了，說一下Firefox如何去掉連接的虛線框的方法。

a{
　　outline:none;/*去掉Firefox點擊時產生的虛線框*/
}

PS：全文都只是做者的觀點，至於使用text-indent:-9999px;來解決問題是否可行，有人贊同有人反對。因此仍是有待進一步討論。