opacity:0 和visibility:hidden 有完全一样的效果吗 [英] Does opacity:0 have exactly the same effect as visibility:hidden

问题描述

如果是这样，它是否有效地弃用了 visibility 属性?

(我意识到 Internet Explorer 尚不支持此 CSS2 属性.)
布局引擎的比较

另见:可见性:隐藏和显示之间的区别是什么:无

解决方案

这里汇总了各种答案中经过验证的信息.

这些 CSS 属性中的每一个都是独一无二的.除了使元素不可见之外，它们还有以下附加效果:

1. 折叠元素通常占用的空间
2. 响应事件(例如，点击、按键)
3. 参加taborder

<前>折叠事件标签不透明度:0 否 是 是可见性:隐藏 否 否 否可见性:折叠 是* 否 否显示:无 是 否 否* 在表格元素内是，否则否.

If so, does it effectively deprecate the visibility property?

(I realize that Internet Explorer does not yet support this CSS2 property.)
Comparisons of layout engines

See also: What is the difference between visibility:hidden and display:none

解决方案

Here is a compilation of verified information from the various answers.

Each of these CSS properties is unique. In addition to rendering an element not visible, they have the following additional effect(s):

1. Collapses the space that the element would normally occupy
2. Responds to events (e.g., click, keypress)
3. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

这篇关于opacity:0 和visibility:hidden 有完全一样的效果吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！