Home > Web Front-end > HTML Tutorial > CSS text-indent: -9999px;_html/css_WEB-ITnose

CSS text-indent: -9999px;_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:03:54
Original
1118 people have browsed it

   建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。

   在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条:

   1、display:none;

   这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间。GG也搜CSS文件?不过如果用这个方法,

如何设计,也是难题。

   2、visibility:hidden;

   和display:none;相对应,为隐藏的对象保留物理占位空间。  

   3、overflow:hidden;

   这是网上用的最多的方法,但是我认为对于隐藏h1标签的“站点名称”文字,不太合适,原因我在最后说。

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

  4、positon:absolute;

  用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,另外我个人不喜欢用绝对坐标定位magin这个属性,margin在不同浏览器中总是带来不可预料的Bug。

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

  5、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;}
Copy after login

  

  js助手

  

  在h1使用上语义明确,符合语义化定义。text-indent就是首行缩进,大家都在中文段落,首行空两格用过它。这里通过负值缩进,使文字超出可视区,而这时h1下的背景就显示出来了,h1中包含的标签又不影响使用,对于隐藏文字“站点名称”应该是最佳方案了。但对于多段文字的隐藏这个方法就不适合了。

  这里还有个问题,就是点击

链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。但是Firefox就有些麻烦,它把缩进的文字范围也包含进来了,这样不是很美观。

  于是需要屏掉点击时产生的虚线框,IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下Firefox如何去掉链接的虚线框的方法。

a{  outline:none;/*去掉Firefox点击时产生的虚线框*/}
Copy after login

PS:全文都只是作者的观点,至于使用text-indent:-9999px;来解决问题是否可行,有人赞同有人反对。所以还是有待进一步讨论。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template