CSS中的visibility

最新推荐文章于 2025-07-24 10:10:38 发布

归小超

最新推荐文章于 2025-07-24 10:10:38 发布

阅读量8.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42966484/article/details/103717667

CSS 专栏收录该内容

4 篇文章

订阅专栏

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标签的位置依然是被保留的，所以写的时候仔细点就行了