关于visibility和display的区别
对使用display:none;的元素,浏览器不会去解析,搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略,而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。
而对使用visibility:hidden;的元素,虽然隐藏了,但位置仍在,给人的感觉是“占着茅坑布拉斯”,要配合position:relative和position:absolute一起来用,没有display:none;那么简单、灵活。就另外一点,visibility:hidden;转换为visibility:visible跟display:none;转换为display:block;性能要好,因为display在切换可见性时会产生reflow,它要重新构建frame,当然要比visibility:visible慢。
如果你以上两种方法都不想要的话,可以写一个类:
.hidden{
overflow: hidden;
width: 0;
height: 0;
border:none;
}
就是采用overflow隐藏,然后把元素的基本属性值设置为最小或无,当然,如果你要显示的话,还得写另一个相应的类。
发表评论