Setting body{overflow:hidden;} invalid bug under IE6 and IE7 (transferred)_html/css_WEB-ITnose

This is actually not a bug, it is just caused by the different default payment values ​​of each browser. Other sensible browsers are fine, this bug only appears under IE6 IE7

Problem recurrence:

<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;}

It does not take effect under IE6 IE7 (the horizontal and vertical scroll bars under IE6 are still there under IE7)

Reason :

Smart browsers (ex. chrome and firefox) will initially pay html{overflow:visible;}

IE6 initial payment html{overflow-x:auto;overflow-y:scroll ;}

IE7 initial payment html{overflow-x:visible;overflow-y:scroll;}

Only the dom root node (that is, the html root node) sets html{overflow: visible;}, the browser will apply the overflow value in the body element to the view area.

For example:

If body{overflow:hidden} is set, a scroll bar will appear, but this scroll bar is not for body, but for html
Only if you set html {overflow:visible;} body{overflow value} can be passed to html{}
In this way, the value of html becomes {overflow:hidden}, ok there is no scroll bar

This way It is clear that it is not a bug, but a problem caused by different initial values ​​​​in browsers.

Solution:

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

This item can be organized into your own reset file

via Feichang'blog original address