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 回答