16

样式visibility:hidden应用于html元素时会做什么？它与滚动条有什么关系，尤其是。关于IE7？

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

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

1 回答 1

6

规格

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

观察到的行为

使用这个小提琴...

火狐、IE 8-10、Opera

使元素不渲染（应该如此），但仍然显示自身的一些渲染，visibility: hidden因为它显示. 正如 BoltClock 在他的评论中指出的那样，这实际上是可以预料的，因为（根据规范）将成为......htmlbodyhtmlbackground-colorbackgroundhtml

“画布的背景及其背景绘画区域延伸到覆盖整个画布。”

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

Chrome 和 Safari

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

IE7

元素的不会渲染（如 Chrome），但内部元素也background-color没有显示滚动条。这似乎表明它没有按照规范正确保留在布局中。htmldiv

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

在我看来，Chrome 和 Safari 渲染似乎是最直观的（我作为设计师所期望的），因为我不希望background-color渲染（因为元素是hidden），但同时，如果我设置一个孩子visible，那么我希望浏览器让我代表那个孩子滚动，即使html包装器设置为visibility: hidden. 然而，webkit 浏览器或其他浏览器是否最接近规范是有争议的，因为正如 BoltClock 在他的评论中指出的那样，规范似乎没有指出元素visibility上是否html应该或不应该影响background属性的传播）。

于 2013-01-22T02:25:55.547 回答