CSS技巧: CSS隐藏文字的方法

東里山人

本贴系从网上搜索相关资料，并经本人亲自验证。

今天要把百度站内搜索代码加在“东里书斋”上，这样可以做个站内全文搜索,再利用其划词搜索的功能，会非常方便。找了相关资料，一开始都不太满意，总有各种各样的问题。因为一般我们想隐藏的是HTML页面上的某些文字，但我想隐藏的除了文字外，还有站内搜索的输入框。搜索了相关资料，试了各种方法，最后终于解决了。把几种方法列下来，以备参考。

1、display:none;

　　这个大家普遍说法是，搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略，不为隐藏的对象保留物理占位空间。如果不考虑搜索引擎的因素，方案一无疑最佳的，适合内网站点使用，并不是一无是处。

　　但是有一点，一定要注意，在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。

　　另外，如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题。

　　最终实践经果，在东里书斋网站上，如果直接使用这样方法，百度站内搜索的划词功能即刻失效（不隐藏则有效），而且我担心的是不止划词功能失效，最后此方法被放弃。还有一点，这个方法用在采用Discuz!系统的论坛上则不会失效。

2、visibility:hidden;

　　和display:none;相对应，为隐藏的对象保留物理占位空间。此方案可以用在特殊的占位场合，了解一下，没坏处。
　　
3、overflow:hidden;

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

　　这是网上用的最多的方法，但是可能对于隐藏h1标签的“站点名称”文字，不太合适。网上都说好，如果不是h1标签，还真可以用它。

4、positon:absolute;

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

　　用绝对定位将其推出可视区，不过虽然可视性不存在，但仍占据物理空间，与隐藏文字的宗旨相背，另外margin这个属性，在不同浏览器中总是带来不可预料的Bug。
　　
5、text-indent:-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作为一个块来显示（display:block;），指定长宽（和图片一样大小），然后指定h1的背景图片，也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的，仍然是作为字符形式出现的博客标题，然后用text-indent:-9999px;将文字甩到屏幕看不到的地方，9999px应该是足够了，谁的屏幕也没那么大吧。这里通过负值缩进，使文字超出可视区，而这时h1下的背景就显示出来了，h1中包含的<a>标签又不影响使用，但对于多段文字的隐藏这个方法就不适合了。

　　这里还有个问题，就是点击<h1><a>链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。但是Firefox就有些麻烦，它把缩进的文字范围也包含进来了，这样不是很美观。
　　
　　于是需要屏掉点击时产生的虚线框，IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下Firefox如何去掉链接的虚线框的方法。
　　
a{
outline:none;/*去掉Firefox点击时产生的虚线框*/
}

6、另一种首行缩进

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

　　-9999px 的方法，使浏览器画一个9999宽的盒子，会降低一些性能。这是更有效率的方法，试过了，h1也能用。但这种文法，只能隐藏文字，无法隐藏输入框。

7、设置左内边距

.yincang{
padding-left: 100%;
white-space: nowrap;
overflow: hidden;
}

　　前面的方法，除了第3种，其他的或者只能隐藏文字，或者会导致性能问题，都不能令人满意。这个方法是受第6种方案的启发，将文字首行缩进改为设置区块的左内边距，就样就与第3种方法一样，都能将输入框连同文字一块隐藏。

经过一段时间实践，第3种和第7种方法，在Chrome上可以完美隐藏，但是IE8则无法隐藏。