關于CSS中隱藏內容方法的思考

    正在讀《精通CSS》，很多樣式需要用到內容隱藏，比如平時無內容，鼠標懸停時顯示出內容。書中常用的方法是用text-indent:-1000em、margin-left:-1000em將元素隱藏到屏幕邊緣之外，而display:none和visibility:hidden、overflow：hidden也可以做到隱藏，那么這幾種用法有哪些利弊呢？

1.display:none;

搜索引擎可能認為被隱藏的元素屬于垃圾信息而忽略，不利于SEO；屏幕閱讀器會忽略被隱藏的元素。

2.visibility:hidden

可以實現隱藏元素在前臺的顯示，但它的位置不會被后邊的元素搶占。

3.overflow：hidden

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

如上所示，將寬度和高度設定為0，然后超過部分隱藏，這是一種較為合理的隱藏方式。

4.text-indent:-1000em、margin-left:-1000em

這種隱藏方式在不同的瀏覽器下可以會產生未知的效果。

一般情況下，css隱藏的用途：
1、對文本的隱藏
2、隱藏超鏈接（另類黑鏈）
3、對統計代碼隱藏
4、隱藏超出圖片
5、css隱藏滾動條
6、css來隱藏div層

使用css隱藏方法
1、使用display:none;來隱藏所有信息（無空白位占據）
2、使用overflow:hidden;來隱藏溢出的文字或圖片
3、使用overflow-y:hidden;和overflow-x:hidden控制滾動條的隱藏與否

轉載其他隱藏內容的方式：

{ display: none; /* 不占據空間，無法點擊 */ } 
/********************************************************************************/
{ visibility: hidden; /* 占據空間，無法點擊 */ } 
/********************************************************************************/
{ position: absolute; top: -999em; /* 不占據空間，無法點擊 */ } 
/********************************************************************************/
{ position: relative; top: -999em; /* 占據空間，無法點擊 */ } 
/********************************************************************************/
{ position: absolute; visibility: hidden; /* 不占據空間，無法點擊 */ } 
/********************************************************************************/
{ height: 0; overflow: hidden; /* 不占據空間，無法點擊 */ } 
/********************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* 占據空間，可以點擊 */ } 
/********************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間，可以點擊 */ } 
/********************************************************************************/
{ 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* IE6/IE7/IE9不占據空間，IE8/FireFox/Chrome/Opera占據空間。都無法點擊 */ 
} 
/********************************************************************************/
{ 
position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* 不占據空間，無法點擊 */ 
}