html - 使用可见性 : hidden. 时奇怪的 CSS 行为是否在规范中定义？

Question

我使用的是最新的 Chrome 35。

我对 CSS 关键字可见性的理解是，visibility: hidden 根本不会呈现包含所有子元素的元素，同时将其保留在文档流中。

现在，当我调试一个现有的应用程序时，我无意中发现了以下奇怪的行为。父元素 (parEl) 设置为 visibility: hidden 并且有两个子元素 (childA, childB)。元素 childA 的可见性设置为可见。从我到今天的想法是，什么都不应该是可见的，但 childA 实际上正在显示。

我不知道，这是浏览器错误还是实际预期的行为，如果是，这是在哪里指定的？

JSFiddle 在这里: http://jsfiddle.net/7Yev6/

Answer 1

虽然这种行为看起来违反直觉，但实际上是预期的行为。这在 propdef for visibility 中说明:

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

您可能期望后代隐藏的行为来自这样一个事实，即当未直接指定属性时，它们默认从其容器继承 visibility: hidden 值。

请注意 visibility 和 opacity 的不同之处在于 opacity 不是继承的，而是 opacity 具有的效果在一个元素上也适用于它的后代并且不能被逆转(这意味着如果你在父元素上有 opacity: 0，opacity: 1 不会导致它的 child 完全不透明)。