会员中心
用户名：    密码：    验证码：      免费注册会员

jquery手册   CSS2手册       请关注健康

CSSer > 客户端开发 > web标准与前台开发 > 更具可访问性的Display:none;

来源：三月的蚁穴 作者：march 发布时间：2007-04-12
雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks
现在越来越多的网页出于各种各样的原因会将页面上的一些区域（通常是div）隐藏，CSS隐藏元素的方法也有很多种，最常用也是最好用的就是display:none。可是被赋予这条规则的元素会在某些辅助设备中被认为不存在于文档模型中，所以造成该区域中的内容不可访问。

text-indent:-9999px;也是由于这个原因被越来越广泛地使用的。

今天看见一篇文章：Accessible Display: None，介绍了一种用overflow:hidden来达到和display:none一样的显示效果，但更具可访问性。其原理很简单，CSS代码如下，很容易明白：
selector{
display: block;
overflow: hidden;
width: 0;
height: 0;
}
将元素的溢出属性（overflow）设为hidden，然后把长和宽都设为0，这样元素就没有大小了。但某些元素在某些浏览器（IE6）下还应该需要增加一个属性：font-size:0;。

方法虽然不错，但是在实际的项目中还得按需来使用，因为毕竟一个“display:none;”和那四句相比要简单得多。


相关文章