返回首页当前位置:首页 >> 网站建设 >> 正文

更具可访问性的Display: none;

文章来自:设计学院 | 发表时间:2007-10-1 13:43:21
现在越来越多的网页出于各种各样的原因会将页面上的一些区域(通常是div)隐藏,CSS隐藏元素的方法也有很多种,最常用也是最好用的就是display:none。可是被赋予这条规则的元素会在某些辅助设备中被认为不存在于文档模型中,所以造成该区域中的内容不可访问。
text-indent:-9999px;也是由于这个原因被越来越广泛地使用的。
今天看见一篇文章:Accessible Display: None,介绍了一种用overflow:hidden来达到和display:none一样的显示效果,但更具可访问性。其原理很简单,CSS代码如下,很容易明白:
selector{#FF0000;">
display: block;#FF0000;">
overflow: hidden;#FF0000;">
width: 0;#FF0000;">
height: 0;
}
将元素的溢出属性(overflow)设为hidden,然后把长和宽都设为0,这样元素就没有大小了。但某些元素在某些浏览器(IE6)下还应该需要增加一个属性:font-size:0;
方法虽然不错,但是在实际的项目中还得按需来使用,因为毕竟一个“display:none;”和那四句相比要简单得多。