原文鏈接 http://blog.163.com/wp_design/blog/static/13999717120120295198574/
查看別人頁面的時候發現 text-indent:-9999px;
以前只知道 text-indent是控制段落首行縮進的，今天才知道居然可以隱藏文字。從網上看了篇博客，摘錄如下：
1、display:none;
這個大家普遍說法是，搜索引擎可能認為被隱藏的文字屬於垃圾信息而被忽略，不為隱藏的對象保留物理占位空間。
2、visibility:hidden;
和display:none;相對應，為隱藏的對象保留物理占位空間。
3、overflow:hidden;
這是網上用的最多的方法。
4、positon:absolute;
用絕對定位將其推出可視區，不過雖然可視性不存在，但仍占據物理空間，與隱藏文字的宗旨相背，另外我個人不喜歡用絕對坐標定位magin這個屬性，margin在不同瀏覽器中總是帶來不可預料的Bug。
5、text-indent:-9999px；
把h1作為一個塊來顯示（display:block;），指定長寬（和圖片一樣大小），然后指定h1的背景圖片，也就是將我們需要的圖片作為h1這個標簽的背景。而h1標簽中插入的，仍然是作為字符形式出現的博客標題，然后用text-indent:-9999px;將文字甩到屏幕看不到的地方，9999px應該是足夠了，誰的屏幕也沒那么大吧。
總結一下：
如果不考慮搜索引擎的因素，方案一無疑最佳的，適合內網站點使用，並不是一無是處。
方案二，可以用在特殊的占位場合，了解一下，沒壞處。
方案三，網上都說好，如果不是h1標簽，還真可以用它。
方案四，嗯，前面說我不喜歡。
方案五，在h1使用上語義明確，符合語義化定義。text-indent就是首行縮進，大家都在中文段落，首行空兩格用過它。這里通過負值縮進，使文字超出可視區，而這時h1下的背景就顯示出來了，h1中包含的<a>標簽又不影響使用，對於隱藏文字“站點名稱”應該是最佳方案了。但對於多段文字的隱藏這個方法就不適合了。
這里還有個問題，就是點擊<h1><a>鏈接時，會產生一個虛線框，對於IE還好，沒什么問題，虛線框只是在背影圖片大小。但是Firefox就有些麻煩，它把縮進的文字范圍也包含進來了，這樣不是很美觀。
於是需要屏掉點擊時產生的虛線框，IE和FF屏虛線框方法不一樣。IE采用的遍歷方法(HTC,css表達式)有些耗系統資源，正好我們只需要隱藏FF下的虛線框就行了，IE就不管了，說一下Firefox如何去掉鏈接的虛線框的方法。
a{
outline:none;/*去掉Firefox點擊時產生的虛線框*/
}