样式"可见性:隐藏"对于<html>元素意味着什么?

Jef*_*emp 16 html css

visibility:hidden应用于html元素时样式的作用是什么?是否与滚动条有关,尤其是 关于IE7?

背景:Oracle Apex生成此代码,我试图解决它是否导致IE7中间歇性隐藏的水平滚动条出现问题:

<style> html {visibility:hidden;} </style>
Run Code Online (Sandbox Code Playgroud)

Sco*_*ttS 6

产品规格

根据规范,该visibility物业仍应影响布局.这意味着如果元素最终导致滚动行为,它不应该影响滚动.此外,设置的任何子项visible都应在hidden元素中可见.


观察到的行为

这个小提琴 ......

Firefox,IE 8-10,Opera

使得visibility: hidden在对html元素不会使body(因为它应该),但仍显示一些渲染html本身,因为它显示了background-color.正如BoltClock在他的评论中指出的那样,这实际上可能是预期的,因为backgroundhtml是(根据规范)成为......

"画布的背景及其背景绘画区域扩展到覆盖整个画布."

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

Chrome和Safari

它不渲染background-colorhtml,但它允许的div显示,它显示滚动条.因此Chrome不会将该background属性传播到画布,大概是因为它visibility被设置为hidden.

IE7

background-colorhtml元素不会呈现(如Chrome),但也有显示出来没有滚动条div内部元素.这似乎表明它没有按照规范正确地停留在布局中.


所以可能是该visibility: hidden属性是您的问题的一部分.显然,背景点根本不涉及滚动问题,但确实解决了关于属性如何影响html元素的整体问题.

在我看来,Chrome和Safari渲染似乎是最直观的(我可能期望作为设计师),因为我不希望background-color渲染(因为元素是hidden),但同时,如果我设置一个孩子visible,然后我希望浏览器让我代表那个孩子滚动,即使html包装设置为visibility: hidden.然而,在WebKit浏览器或其他浏览器是否是最接近规范是值得商榷的,如BoltClock在他的评论noteed,规范似乎并没有表明是否visibility将上html元素应该或不应该影响的传播background属性).