更具可访问性的Display: none;

2007年04月04日 - Web标准, 前端技术, 可用性

现在越来越多的网页出于各种各样的原因会将页面上的一些区域（通常是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;”和那四句相比要简单得多。

p.s. 这篇文章整篇使用谷歌拼音输入法输入的，体验还不错！

5条留言

  1. Aether - April 4th, 2007 at 19:10

    是个问题：（

  2. simx - April 10th, 2007 at 22:37

    此方法前些天在朋友那边看过

    text-indent在不同浏览器有些差异的

    我平时用
    #world span{position:absolute;margin-top:-9999px;margin-left:-9999px;}

    现在有时候会用上面的overflow方法

    稻草__________
    v4uu.com

  3. March - April 11th, 2007 at 14:39

    text-indent的使用目的和这个还是有区别的。另外就是把元素也好，元素内的文字也好，移动到一个非常远的地方都会出现潜在的问题，就是当在超大屏幕演示时的问题，虽然不常见，但也算是个问题吧。

  4. bill - April 14th, 2007 at 22:46

    谢谢分享。

  5. geniusleft - October 25th, 2007 at 18:28

    最好用的不应该是visibility:visible|hidden么？

    它不必创建和销毁dom element，效率上就比display:none高，实乃居家旅行必备。。。

留言：