战剑网络,网站建设,系统开发,程序设计

搜索Top
更具可访问性的Display:none;


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

[ 打印本页 ] [ 收藏本页 ]

[上一篇]:网页滚动条CSS样式
[下一篇]:已经到底了

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
搜索Top

关于我们 - 联系我们 - 广告业务 - 友情链接 - 网站制作 - 留言板 - 会员注册
All Right Zjm.Net.Cn (zjm Enterprise v3.0)
联系电话:0576-8603312 地址:浙江省台州市经济开发区
技术支持:点击这里给我发消息280610248 业务: 点击这里给我发消息40520767 客服: 点击这里给我发消息441758646
E-mail:zjm@zjm.net.cn 备案证书号:浙ICP备06030047号