請選擇 進入手機版 | 繼續訪問電腦版

東里論壇

 找回密碼
 立即註冊

QQ登录

只需一步,快速开始

搜索
查看: 2070|回復: 0

[使用心得] CSS技巧: CSS隐藏文字的方法

[複製鏈接]

312

主題

459

帖子

2910

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
2910
發表於 2015-4-7 16:56:30 | 顯示全部樓層 |閱讀模式
本贴系从网上搜索相关资料,并经本人亲自验证。

今天要把百度站内搜索代码加在“东里书斋”上,这样可以做个站内全文搜索,再利用其划词搜索的功能,会非常方便。找了相关资料,一开始都不太满意,总有各种各样的问题。因为一般我们想隐藏的是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则无法隐藏。
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

QQ|小黑屋|手機版|Archiver|東里論壇 ( 粤ICP备14015598号 ) 公安备案图标粤公网安备 44512202000019号

GMT+8, 2020-8-13 01:33 , Processed in 0.078126 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回復 返回頂部 返回列表