Question

如果是，它是否有效地弃用visibility属性？

（我意识到Internet Explorer尚不支持此CSS2属性。）
Comparisons of layout engines

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

Answer 1

以下是各种答案中经过验证的信息汇编。

这些CSS属性中的每一个实际上都是唯一的。除了渲染元素不可见外，它们还具有以下附加效果：

折叠元素通常占用的空间
回复事件（例如，点击，按键）
参与 taborder

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

* Yes inside a table element, otherwise No.

Answer 2

没有

具有不透明度的元素会创建新的堆叠上下文。

另外，CSS规范没有对此进行定义，但opacity:0的元素是可点击的，而visibility:hidden的元素则不是。

Answer 3

不，不。有一个很大的不同。它们是相似的，因为如果隐藏可见性或不透明度为0，您可以透过该元素看到，但是

不透明度：0 ：您无法点击

背后的元素。

可见性：隐藏：您可以点击
背后的元素。

Answer 4

我完全不确定，但这是我跨浏览器透明度的方式：

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

具有可见性的对象：隐藏仍然具有形状，它们只是不可见。仍然可以单击不透明度零元素并对其他事件做出反应。

Answer 5

我并不完全确定这一点，但我认为屏幕阅读器不会读取隐藏可见性的内容，但无论其不透明度如何，它们都可以阅读。

这是我能想到的唯一区别。

Answer 6

在制作影响contenteditable中元素的用户风格时，我注意到如果您将某些内容设置为visibility: hidden，那么输入插入标签并不真正想要与之交互。例如，如果你有

<div contenteditable><span style='visibility: hidden;'></span></div>

...然后看来如果你专注于div / span，你就不能真正输入它。而opacity: 0似乎可以。我还没有对此进行过广泛的测试，但我认为这里值得一提，因为本页上的其他人都没有谈到对文本输入的影响。这似乎可能与上面提到的事件内容有关。

Answer 7

visibility和opacity之间存在许多差异。大多数答案都提到了一些差异，但这里有一个完整的清单。

不透明度不会继承，而可见性确实
不透明度是可动画的，而可见度则不是（好吧，技术上它是，但是根本没有定义行为，比如说，＆＃34; 37％折叠，63％隐藏＆＃34;，所以你可以认为这是不可动画的。）
使用不透明度，不能使子元素比其父元素更不透明。例如。如果你有一个带颜色的p：黑色和不透明度：0.5，你不能让它的任何一个孩子完全变黑。不透明度的有效值介于0和1之间，此示例需要2！
因此，根据Martin's comment，您可以在不可见的父级（可见性：隐藏）中显示可见子级（可见性：可见）。不透明度是不可能的;如果父母有不透明度：0;它的孩子总是看不见的。
Kornel's answer提到不透明度值小于1会创建自己的堆叠上下文;能见度没有价值（我希望我能想出一种方法来证明这一点，但我无法想出任何方法来展示可见性的叠加背景：隐藏元素。）
根据philnash's answer，屏幕阅读器仍会读取不透明度为0的元素，而可见：隐藏元素不会。
根据Chris Noe's answer，可见性包含更多选项（例如展开），不可见的元素不再对点击做出响应，也无法进行选项卡标记。

（将此作为社区维基，因为借用现有的答案，否则不公平。）

Answer 8

Phil说的是真的。

IE支持不透明度：

filter:alpha(opacity=0);

Answer 9

属性具有不同的语义含义。虽然语义CSS听起来可能很愚蠢，但正如其他用户所提到的那样，它会对屏幕阅读器等设备产生影响 - 语义会影响页面的可访问性。

不透明度：0与可见性具有完全相同的效果：隐藏

9 个答案: