{ hide_text } CSS文字隐藏总结报告
作者:tracy2 来源:蓝色理想 发布时间:2010-06-13 17:19:00
{ hide_text } CSS文字隐藏总结报告
最近整理的一份CSS文字隐藏的demo,总结了几种方法,希望得出一种最完美的方案放进自己的代码片段,可是,到最后却陷入一种重复不断地推翻结论的境地。因为需要考虑的应用场景和元素实在太多,放下浏览器不谈,不同的应用终端,不同的标签结构会有不一样的最优方案,因此,与其希望在工作上多“偷一些懒”,不如平常多巩固积累基础的知识,在需要权衡的时候,便能更加得心应手。
因为自己经验尚浅,demo部分难免会有错漏情况,如发现问题,望大家能指出。
方法列表 demo
1. 毫无保留:display:none
代码片段:
(x)HTML
<p class="hide_display">我是打酱油的文本</p>
CSS
/* 暴力隐藏 */
.hide_display{display:none;}
兼容性:
优点:
方便、快捷
兼容性好
缺点:
屏幕阅读器无法阅读
超链接不适用
图片替代文本需要其他标签的背景
影响搜索排名
大量使用容易被认为是SEO作弊
2. 折中选择:overflow:hidden/position:absolute/visibility:hidden
代码片段:
(x)HTML
<span class="hide_overflow">我是一号打酱油的文本</span>
<p class="hide_position">我是二号打酱油的文本</p>
<p class="hide_visibility">我是三号打酱油的文本</p>
CSS
/* 隐藏元素,脱离文本流,使元素不影响其他元素 */
.hide_overflow{
height:0px;
overflow:hidden;
display:block;/* 行内元素需要 */
float:left; /* 脱离文档流 或者position:absolute;*/
}
/* 定位在可视范围外,脱离文本流,使元素不影响其他元素 */
.hide_position{
position:absolute;
left:-32767px;
}
/* 原理与.hide_position一样*/
.hide_visibility{
visibility:hidden;
position:absolute; /* 脱离文档流 */
margin-left:-32767px;
}
猜你喜欢
- 我们现在使用的验证手段都是以验证码为主,让用户根据图片输入验证字符,这种方法的安全度尚可,但会给用户带来一些不便和困扰,比如这个雅虎的验证码
- 我们工作中经常需要将数据转化成柱状图,饼图等,以方便直观的分析数据, 这里给大家介绍一个ASP中制作饼图、柱状图的组件:csDra
- 这个类主要解决在类型转换时,如果直接使用类型转换函数,会因为变量为空或者格式不对而导致程序报错,而这种报错在大多数情况下是允许的.例如要转换
- 在ASP中加密方法有对应的解密方法好象不多,现在根据前辈资料整理出在asp中加密与解密函数,根据RSA 算法实现的。什么是RSA?
- asp中使用addnew方法添加一条记录后,我们经常使用取得自递增的ID,而使用bookmark很容易实现这样的功能。rs.open&nbs
- Function Comma(str)If Not(IsNumeric(str)) Or 
- 最近在改个程序用到了在js中设置css的float属性,以为和平常的写法一样,原来不是,只好去请教google,原来...首先大家先来看一下
- 工厂模式(Factory Pattern)是什么工厂模式是一种创建型模式,它提供了一种创建对象的最佳方式。在工厂模式中,我们在创建对象时不会
- 相关文章推荐:各种loading加载图标下载 gif格式loadinfo和ajaxload一样,也是一个在线Ajax载入动画生成工
- 当数据库服务器建立好以后,我们首先要做的不是考虑要在这个支持数据库的服务器运行哪些受MySQL提携的程序,而是当数据库遭到破坏后,怎样安然恢
- 有时在项目中会遇到通过在页面中采用iframe的方式include其它页面,这时就会考虑不要因出现滚动条而影响页面效果,但include页面
- 硬件平台:SUN Ultra Enterprise 3000 操作系统:Solaris 2.5(中文简体) 磁盘:4.2GB 内存:256M
- Real Numbers实数实数是具有小数部分的数字, 当然, 实数不是专门用来表示小数的, 也可以用DECIMAL来存储那些无法用INTE
- 错误类型: Microsoft JET Database Engine (0x80040E10) 至少一个参数没有被指定值。 原因:在写SQ
- 这篇文章主要从基本情况、成本、优缺点和应用场合等方面对5种MySQL的可靠性方案进行了详细的分析和比较,另外,本文对MySQL数据库的开发和
- 为了能够使用ERWin能够进行基于MySQL数据库的物理设计,可以采用以下方法步骤(假设你已经有了一个设计好的LOGICAL MODEL):
- 我们也可以来做一个,但这个“定时器”的工作时间范围应控制在1个小时至100 毫秒之间: <%sub StartTi
- J2ME是利用HttpConnection建立HTTP连接,然后获取数据,ASP也是利用HTTP协议,因而可以利用J2ME与ASP建立连接,
- JavaScript游戏开发之键盘控制层的移动截图:<html> <head> <meta http-equi
- 客户端调用XMLHTTP的过程很简单,只有5个步骤: 1、创建XMLHTTP对象 2、打开与服务端的连接,同时定义指令发送方式,服务网页(U