Home > Web Front-end > HTML Tutorial > Setting body{overflow:hidden;} invalid bug under IE6 and IE7 (transferred)_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 12:35:00
Original
1169 people have browsed it

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;}
Copy after login

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;}
Copy after login

This item can be organized into your own reset file

via Feichang'blog original address

Related labels:
ie6
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template