Solution for horizontal scroll bar problem in IE6, ie6 horizontal

Solution for horizontal scroll bar problem in IE6, ie6 horizontal

When we set the css style to html {overflow-y: auto;}, there is no problem in ie7 or later versions, however, in ie6, you will find that the vertical scroll bar will cause the horizontal scroll bar to appear. The reason is that when there are too many vertical scroll bars in ie6, the width of the page is the original width plus the width of the scroll bar, resulting in the page width exceeding 100%, and the horizontal scroll bar appears, in ie7 + browser, the scroll bar is automatically recognized. The page width is the content width plus the scroll bar width is equal to 100%, and no scroll bar appears, this is equivalent to ie's scroll bar bug (this is purely personal opinion. If it is not correct, please point out that you can learn and communicate with each other ).

There are several solutions to solve the above problems:

Solution 1: add the html {overflow-y: hidden;} Style

This scheme only hides the horizontal scroll bar, does not solve the fundamental problem, and does not want any effect (the redundant horizontal content will be hidden ), this is a bad solution.

Solution 2: Add html {overflow-y: scroll ;}

Add this style. When the page content exceeds the page height, the vertical scroll bar is displayed normally, and the horizontal scroll bar is not displayed, which looks like the effect we want; however, when the page content is insufficient to show a vertical scroll bar, we will find a gray-style scroll bar position on the right side of the page, which does not look beautiful, not what we want. But at least we have begun to get close to what we want. It is better than the first solution.

Solution 3: Implement using jQuery

The simple css style can no longer meet our needs. Through the second solution, we can think of a better solution. We can judge that when the page height requires a vertical scroll bar, set the page styleOverflow-y: scroll;In this way, will it achieve what we want, and facts prove completely OK,

$ (Function () {// solve the problem that a horizontal scroll bar appears on the page of IE6 if ($. browser. msie & $. browser. version = "6.0" & $ ("html") [0]. scrollHeight> $ ("html "). height () $ ("html" ).css ("overflowY", "scroll ");})

The above is the solution to the horizontal scroll bar on the page. It is only applicable to my current situation. There are certainly many ways to solve this problem. I will try again later ,,,

(Some people say that Google Chrome has a corresponding solution, with limited time and no research. Mark it here)