ホームページ  >  記事  >  ウェブフロントエンド  >  IE6 および IE7 で body{overflow:hidden;} を設定すると無効なバグ (転送)_html/css_WEB-ITnose

IE6 および IE7 で body{overflow:hidden;} を設定すると無効なバグ (転送)_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:35:001131ブラウズ

これは実際にはバグではなく、各ブラウザのデフォルトの支払い値が異なることが原因であるだけです。他のスマート ブラウザでは問題ありませんが、このバグは IE6 IE7 でのみ発生します

問題の再現:

<p>There are no scrollbars on this page in sane browsers</p>html, body, p {    margin: 0;    padding: 0;}body {    overflow: hidden;}p {    width: 5000px;    height: 5000px;}

IE6 および IE7 では有効になりません (IE6 の水平スクロール バーと垂直スクロール バーは IE7 でも引き続き表示されます)

理由:

スマート ブラウザ (例: chrome や Firefox) は最初に html{overflow:visible;} を支払います。

IE6 初期支払い html{overflow-x:auto;overflow-y:scroll;}

IE7 初期支払い html{overflow-x:visible;overflow-y:scroll;}

dom ルート ノードのみ (それもは HTML ルート ノードです) html{overflow:visible;} を設定すると、ブラウザは body 要素のオーバーフロー値をビュー領域に適用します。

例:

body{overflow:hidden}を設定するとスクロールバーが表示されますが、このスクロールバーはbodyではなくhtml用です
bodyにhtml{overflow:visible;}を設定した場合のみ{overflow The value} を html に渡すことができます。{}
このようにして、html の値は {overflow:hidden} になります。スクロール バーはありません

これは非常に明白です。バグではなく、次のことが原因です。ブラウザの初期値が違う問題。

解決策:

html, body, p {    margin: 0;    padding: 0;}html {    overflow: visible;}body {    overflow: hidden;}p {    width: 5000px;    height: 5000px;}

このアイテムは独自のリセット ファイルに整理できます

Feichang'blog の元のアドレス経由

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。