CSS里的visibility属性,大多时候把值设置成visible,或者是hidden。
其中hidden类似于display: none,但是hidden仍然会暂据元素空间。
visibility还有一种值就是collapse。当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。
这个性质在不同的浏览器中会有不同的解释,在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别,在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。
总之:
在通常情况下,使用visibility: collapse;和使用visibility:hidden值没有什么区别。
在非谷歌且是在table的tr上使用collapse,效果同display:none;
在ie低版本(如7)下使用visibility: collapse;没有效果。
具体演示可以参考这里:http://www.webhek.com/post/visibility-collapse.html
<ul id="8">
<li><a href="">员工列表</a></li>
<li><a href="">部门管理</a></li>
<li><a href="" style="display:none">添加员工</a></li>
<li><a href="" style="display:none">wait</a></li>
</ul>
还有这种代码,其实丢弃的内容是a标签,自然li标签的位置依然是被保留的,所以写的时候仔细点就行了