html - 样式 "visibility:hidden"对 元素意味着什么？

Question

visibility:hidden 样式应用于 html 元素时有何作用？它与滚动条有什么关系，特别是。关于 IE7？

背景:Oracle Apex 生成此代码，我正在尝试确定它是否会导致 IE7 中间歇性隐藏的水平滚动条出现问题:

<style> html {visibility:hidden;} </style>

Answer 1

规范

According to the spec , visibility 属性应该仍然影响布局。这对我来说意味着如果元素最终导致滚动行为，它不应该影响滚动。此外，任何设置为 visible 的子项都应该在 hidden 元素中可见。

---

观察到的行为

使用 this fiddle ...

Firefox、IE 8-10、Opera

使 html 元素上的 visibility: hidden 不渲染 body(它应该如此)，但仍然显示 的一些渲染>html 本身，因为它显示了 background-color。正如 BoltClock 在他的评论中指出的那样，这实际上是可以预料的，因为 html 的 background 是( according to spec )成为......

"the background of the canvas and its background painting area extends to cover the entire canvas."

这些浏览器还允许将元素设置回 visible 以显示为 visibility 指示的规范，因此 div 正在显示并且可以滚动。

Chrome 和 Safari

它不会在 html 上呈现 background-color，但它确实允许显示 div 并显示滚动条.所以 Chrome 没有将 background 属性传播到 Canvas ，大概是因为它的 visibility 被设置为 hidden。

IE7

html 元素的 background-color 不呈现(像 Chrome)，但没有显示滚动条 div 元素里面。这似乎表明它没有按照规范正确地保留在布局中。

---

因此 visibility: hidden 属性可能是您问题的部分。显然，背景点与您的滚动问题完全无关，但确实解决了关于该属性如何影响 html 元素的整体问题。

在我看来，Chrome 和 Safari 渲染似乎是最直观的(我作为设计师可能期望的)，因为我不希望 background-color 渲染(因为元素是 hidden)，但与此同时，如果我将一个 child 设置为 visible，那么我希望浏览器让我代表那个 child 滚动，即使html 包装器设置为 visibility: hidden。 然而，webkit 浏览器或其他浏览器是否最接近规范是值得商榷的，因为正如 BoltClock 在他的评论中指出的那样，规范似乎并未表明 visibility html 元素应该或不应该影响 background 属性的传播)。