16

要素visibility:hiddenに適用すると、スタイルはどのように機能しますか？html特に、スクロールバーとは関係がありますか。IE7に関しては？

背景：Oracle Apexはこのコードを生成します。これが、IE7で断続的に非表示になる水平スクロールバーの問題を引き起こしているかどうかを調べようとしています。

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

1 に答える 1

6

仕様

仕様によると、visibilityプロパティは引き続きレイアウトに影響を与えるはずです。これは、要素がスクロール動作を引き起こした場合でも、スクロールに影響を与えてはならないことを意味します。また、に設定された子はすべて要素visible内に表示される必要がありますhidden。

観察された行動

このフィドルを使用して...

Firefox、IE 8-10、Opera

要素をレンダリングしませんが（visibility: hidden必要に応じて）、それ自体のレンダリングを表示します。BoltClockが彼のコメントで述べたように、これは実際には予想されるかもしれません。htmlbodyhtmlbackground-colorbackgroundhtml

「キャンバスの背景とその背景のペイント領域は、キャンバス全体をカバーするように拡張されています。」

これらのブラウザでは、内部に設定された要素を指定visibleの仕様としてvisibility表示できるため、divが表示され、スクロールできます。

ChromeとSafari

をレンダリングしませんbackground-colorがhtml、を表示することはできdiv、スクロールバーを表示します。そのため、Chromeはbackgroundプロパティをキャンバスに伝播していません。これは、おそらくプロパティvisibilityがに設定されているためhiddenです。

IE7

要素のbackground-colorforは（Chromeのように）レンダリングされませんが、内部の要素に表示されるスクロールバーhtmlもありません。これは、仕様に従ってレイアウトに適切にとどまっていないことを示しているようです。div

したがって、visibility: hiddenプロパティが問題の一部である可能性があります。明らかに、背景ポイントはスクロールの問題とはまったく関係ありませんが、プロパティがhtml要素にどのように影響するかについての全体的な質問のポイントに対処します。

background-color私の意見では、ChromeとSafariのレンダリングは（要素がであるため）レンダリングされるとは思わないので、最も直感的（デザイナーとして期待できるもの）のように見えますhiddenが、同時に、子としての場合、ラッパーがに設定されてvisibleいる場合でも、ブラウザーがその子に代わってスクロールできるようにすることを期待します。ただし、Webkitブラウザーまたは他のブラウザーが仕様に最も近いかどうかは議論の余地があります。なぜなら、BoltClockが彼のコメントで述べているように、仕様は、要素のプロパティの伝播に影響を与えるべきかどうかを示していないようです）。htmlvisibility: hiddenvisibilityhtmlbackground

于 2013-01-22T02:25:55.547 に答える