{ hide_text } CSS文字隐藏总结报告(2)
作者:tracy2 来源:蓝色理想 时间:2010-06-13 17:19:00
兼容性:
优点:
方便、快捷
不希望屏幕阅读器读取的内容可以使用visibility
缺点:
超链接不适用
图片替代文本需要其他标签的背景
3. 体验损失:text-indent负值
代码片段:
(x)HTML
<p class="hide_tex"><a href="#">我是打酱油的超链接一号</a></p>
<a class="hide_tex_span" href="#"><span>我是打酱油的
超链接二号</span></a>
<!--全英文字符在IE下不能被隐藏 -->
<input class="hide_tex_input" type="submit" />
<input class="hide_tex_input" type="submit" />
<button class="hide_tex_input">我是打酱油的文本
btn</button>
CSS
.hide_tex a, .hide_tex_span{
text-indent:-32767px;
display:block; /* text-indent适用块状元素中行内元素和
文本节点 */
/* 演示需要 */
width:200px;
height:20px;
margin-left:300px;
background-color:#ccc;
/* outline:none; 不建议隐藏outline,键盘流选手无法操作 */
}
.hide_tex_input{
text-indent:-32767px;
width:200px;
height:50px;
display:block;
}
兼容性:
优点:
适用超链接的图片替代
缺点:
FF的虚边问题
text-indent容易产生bug
标签:隐藏,CSS,文字
0
投稿
猜你喜欢
Sql Server表死锁的解决方法分享
2011-09-01 19:08:00
SQL Server 2005数据转换服务设计问题集锦
2008-12-26 17:29:00
MySQL故障:mysqld-nt: Sort aborted错误的原因及解决办法
2009-11-03 14:32:00
判断Session的过期时间 采用JavaScript实时显示剩余多少秒
2011-04-04 10:48:00
如何在网页显示英语音标(附实例)
2010-01-12 17:07:00
Favicon图标小常识
2010-04-01 12:01:00
互联网产品设计师自我介绍
2009-04-16 12:45:00
全文译稿 Windows Internet Explorer 8 性能优化白皮书
2010-04-23 20:13:00
设置mysql最大连接数的方法
2010-12-03 16:00:00
一个css垂直水平居中布局,css效果
2008-11-03 11:40:00
asp如何创建目录?
2009-11-14 20:51:00
如何使用ASP实现网站的“目录树”管理
2008-06-13 06:39:00
教你如何升级SQL Server数据库系统
2009-01-19 14:42:00
IE 8 提出“超级标准模式”
2008-01-24 19:26:00
oracle命令行删除与创建用户的代码
2009-03-02 10:54:00
asp中文件与文件夹常用处理函数(文件后缀、创建文件等)
2011-02-20 11:00:00
asp采集常用的几个FUCTION
2007-09-05 19:45:00
ASP提速技巧五则
2008-03-20 13:20:00
导航设计的流行趋势
2007-12-25 12:06:00
简单的XML操作:XML文件创建
2008-04-25 10:31:00