Set body {overflow: hidden;} failure bug in IE6 and IE7

This article Reprinted from: http://www.cnblogs.com/tom-zhu/archive/2012/07/15/2592379.html

 

Set body {overflow: hidden;} failure bug in IE6 and IE7 This is actually not a bug, but it is caused by the default payment of different browsers. Other wise browsers are fine. This bug only appears under IE6 IE7.

 

Problem reproduction:

 
<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 does not take effect (the horizontal vertical scroll bars under IE6 are still in the vertical scroll bars under IE7)

Cause:

The smart browser (ex. Chrome and Firefox) will initially pay the value to HTML {overflow: visible ;}

IE6 initial paymentHTML {overflow-X: auto; overflow-Y: Scroll ;}

IE7 initial paymentHTML {overflow-X: visible; overflow-Y: Scroll ;}

The browser will apply the overflow value in the body element to the view area only when HTML {overflow: visible;} is set for the DOM root node (that is, the HTML root node.

For example:

If the body {overflow: hidden} is set, a scroll bar will appear. However, this scroll bar is not the body, but html
Only HTML {overflow: visible;} body {overflow value} can be passed to HTML {}.
In this way, the HTML value becomes {overflow: hidden}, and OK has no scroll bar.

It is clear that it is not a bug, but a problem caused by different browser initial values.

Solution:

 
HTML, body, P {margin: 0; padding: 0 ;}html {Overflow: visible;} Body {overflow: hidden;} p {width: 5000px; Height: 5000px ;}
 

 

This is actually not a bug, but it is caused by the default payment of different browsers. Other wise browsers are fine. This bug only appears under IE6 IE7.

 

Problem reproduction:

 
<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 does not take effect (the horizontal vertical scroll bars under IE6 are still in the vertical scroll bars under IE7)

Cause:

The smart browser (ex. Chrome and Firefox) will initially pay the value to HTML {overflow: visible ;}

IE6 initial paymentHTML {overflow-X: auto; overflow-Y: Scroll ;}

IE7 initial paymentHTML {overflow-X: visible; overflow-Y: Scroll ;}

The browser will apply the overflow value in the body element to the view area only when HTML {overflow: visible;} is set for the DOM root node (that is, the HTML root node.

For example:

If the body {overflow: hidden} is set, a scroll bar will appear. However, this scroll bar is not the body, but html
Only HTML {overflow: visible;} body {overflow value} can be passed to HTML {}.
In this way, the HTML value becomes {overflow: hidden}, and OK has no scroll bar.

It is clear that it is not a bug, but a problem caused by different browser initial values.

Solution:

 
HTML, body, P {margin: 0; padding: 0 ;}html {Overflow: visible;} Body {overflow: hidden;} p {width: 5000px; Height: 5000px ;}