IE6, 7, width 100%, uncontrollable problem of implicit and explicit strip rollin

IE6,7 we know IE's senior version, the compatible problem I always ignore (exactly without the ability of it), because no see this article friends with the browser, but actually there are groups of users not to move or retreat……

In view of the development needs of the project, so the last ditch, recently met the scroll bar, so in this paper, a process this paper is my study.

Problem Description: IE6,7, when the div width width:100%, internal div fixed width is greater than the external div display width, external div appeared at the same time horizontal scroll bar problem

In view of different PS: resolution may influence brought by using this code, I admit, resolution with written this paper and test: notebook 1366*768.

1,The problem now!

The first code and effect diagram. (Note: this example problem only occurs in the ie6,7 browser, the normal.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
    <style>
      *{
         margin:0;
         padding:0;
         overflow:auto;
       }
     </style>
</head>
<body>
    <div style="width:100%;overflow:auto;background-color:white;">
        <div style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-right:5px solid green;">
        </div>
    </div>
</body>
</html>

Div width 100%, highly adaptive; div has a fixed width and height, and in the middle, and the lower right frame visible, convenient for testing. The following in the IE7 effect diagram (IE6 does not capture, a environment too. > _<), see Fig. 1,2, Fig. 3 for normal display effect under IE8.


2,Problem solution?

As for why there will be such a display problem in ie6,7, can only ask Microsoft to, at least I don't know, communication to know a friend, leave a message~_~

General friends encounter should not appear the scroll bar, presumably so treated. Because div overflow is auto, then respectively arranged on the XY axis, X axis to make automatic, Y axis is hidden, so:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
    <style>
      *{
         margin:0;
         padding:0;
         overflow:auto;
       }
     </style>
</head>
<body>
    <div style="width:100%;overflow-x:auto;overflow-y:hidden;background-color:white;">
        <div style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-right:5px solid green;">
        </div>
    </div>
</body>
</html>

The display effect is shown below in Figure 4:

The vertical scroll bar is gone, but the attendant problems, careful friends have found wrong, I add line seems less a, drop, less a red. Why disappear? The truth is that, although the vertical scroll bar is gone, but the vertical scroll bar itself is not it is without rhyme or reason. The direct cause, the scroll bar is content beyond the display range, so also is the current situation, because the div height than the outer div area the height of overflow-y:hidden, and then let the extra content is not visible (not a scroll bar, how to roll to go below shows it.? )

Maybe you don't care if it does not show the range, estimation of this height range is 16px, namely the scroll bar height (or width, below will do analysis).

But if div since it is a fixed height, it must have the significance, content display complete or not, exceed a part to things not so obvious that, lets the user feel at a loss.

3,Their solution at

Since the hidden about 16px high content, then give it the height of the 16px, which shows the ha, good idea! A good test case seems not here, because the frame is always on the edge of the ah, even if the height increases and so. If it is table fixed height, so it is feasible, but the scroll bar when not needed, the table below will be the emergence of additional space. In addition IE8 will always appear in the extra height, this need to solve by CSS hack (such as: height: fixed height; *height: +16px /*ie7*/_height: fixed fixed height; height +16px;/*ie6*/)

For no clearance of the scroll bar, seem to be controlled by JS, here because of my JS is weak, jQuery more familiar, is written in jQuery. >.<, the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
</head>
<script src="jquery-1.8.0.min.js"></script>
<style>
    *{
        margin:0;
        padding:0;
        overflow:auto;
    }
</style>
<script>
    $(function(){
        function getWidth(id,out){
            if(out){
                return $("#"+id).outerWidth();//Get with borders and interstitial width
            }else{
                return $("#"+id).width();//Access to width
            }
        }
        $(window).resize(function(){
            var vstr = $.browser.version;
            if($.browser.msie&&(vstr =='6.0')||vstr=='7.0'){ //Judge ie6,7 browser
                var outW = $("#outdiv").width();
                var inW = getWidth("indiv",true);//Gets the width, here because the frame, so the external true as a parameter
                if(outW<inW){
                    $("#helpdiv").show();
                }else{  //outW>=inW
                    $("#helpdiv").hide();
                }
            }
        });
    });
</script>
<body>
    <div id="outdiv" style="width:100%;overflow-x:auto;overflow-y:hidden;background-color:white;">
        <div id="indiv" style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-right:5px solid green;">
        </div>
        <div id="helpdiv" style="display:none;height:16px;background-color:yellow;overflow:hidden;"></div>
    </div>
</body>
</html>

Gray background part of the above code patterns in IE6 and helpdiv, or the empty div height in the IE6 default is 19px, ~>.<~ I tune for a long time … … to interested friends can see: height empty tag IE6, this problem I also intend to write an article on the link, then.

The above code is mainly in Windows resize, judgment and div width to selectively hide / show helpdiv to achieve div content was not. Here helpdiv is the height of the 16px is based on the width of the scroll bar I test to (the horizontal scroll bar height estimation called -_-b), but the scroll bar height is the same? I found that the Baidu, how much is this paper scroll width? Actually, rolling width and resolution related to … … because of the time and conditions of reason, I did not do the test, people can have a try, results also please leave a message, thank you for your cooperation.

4,Finding better ways

In view of the scroll bar width is varied, shame … … so the method you want to really is not strong, so the Internet search, the following methods, because no other resolution test, how to estimate unknown result, no problem.

Setting the style of this method to deal with this problem is the key to overflow.

1)Analyze the reason of the problem: ie6 is an antique, debugging is very inconvenient, so here only through the ie7,8 analysis, the F12 V developer tools to analyze. The code to the original code as an example.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
    <style>
      *{
         margin:0;
         padding:0;
         overflow:auto;
       }
     </style>
</head>
<body>
    <div style="width:100%;overflow:auto;background-color:white;">
        <div style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-right:5px solid green;">
        </div>
    </div>
</body>
</html>

1.1)IE8 why do not appear problem?

There is no screenshot, text clear, does not appear in the IE8 under the scroll bar, div height is 605px, height is 605px (DIV frame count). When the horizontal scroll bar, the height of div is 621px, div or 605px in height, visible div increased the 16px from the 605px, namely the scroll bar height, then div or 605px in the div to display, so the vertical scroll bar did not appear.

1.2)ie7,6 why questions?

In the IE7, not the scroll bar, div height is 605px, height is div 605px (Bian Kuangsuan), there is no error. But when the scroll bar, the outer div and inner div height did not change, but the horizontal scroll bar to play, it appeared in the div within the height of div, so only 589px height in div display, since not all display, vertical scroll bar will come out.

1.3)Analysis of , the scroll bar height in my notebook is 16px, height of IE8 and div will be because of the emergence of the scroll bar and increase; but in ie7,6 div but has remained the same, this is the reason of it, as to why so, can only ask Microsoft, or what. The idea of the?


2)The principle to solve the problem: says the key to the problem is overflow, here to have a look, how it plays a key role in.

Do a overflow small modifications to the above problem analysis code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow:auto;
    }
</style>
<body>
    <div style="width:100%;overflow-x:scroll;background-color:white;">
        <div style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-right:5px solid green;">
        </div>
    </div>
</body>
</html>

After the test, in this way, will not appear the vertical scroll bar, and div will be 621px, and the div is 605px, the scroll bar is 16px always exists, even within the div width of less than div width, as shown in Figure 5.

Although the div width of less than div width, showed no problem, but in the div is greater than the width of div width, is out of the question……


3)To solve the problem: not nonsense, solve the problem directly, I'm hungry.……

Due to the lack of the most direct way, so still need to rely on JS to dynamic control to solve the scroll bar is not the case. The following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
</head>
<script src="jquery-1.8.0.min.js"></script>
<style>
    *{
        margin:0;
        padding:0;
        overflow:auto;
    }
</style>
<script>
    $(function(){
        function getWidth(id,out){
            if(out){
                return $("#"+id).outerWidth();//Get with borders and gap width, in fact, can be directly used the access width, here is I put the snake.……
            }else{
                return $("#"+id).width();//Access to width
            }
        }
        $(window).resize(function(){
            var vstr = $.browser.version;
            if($.browser.msie&&(vstr =='6.0')||vstr=='7.0'){ //Judge ie6,7 browser
                var outW = $("#outdiv").width();
                var inW = getWidth("indiv",true);//Gets the width, here because the frame, so the external true as a parameter
                if(outW<inW){
                    $("#outdiv").css("overflow-x","scroll");
                }else{  //outW>=inW
                    $("#outdiv").css("overflow-x","auto");
                }
            }
        });
    });
</script>
<body>
    <div id="outdiv" style="width:100%;background-color:white;">
        <div id="indiv" style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-right:5px solid green;">
        </div>
    </div>
</body>
</html>

So, in ie6,7, this paper begins with the problem solved., ^_^

Point is: if outdiv width of less than indiv width, the outdiv overflow-x set to scroll scroll bars has appeared, so outdiv becomes 621px, which added a scroll bar height in the original basis; otherwise, the outdiv overflow-x set to auto or hidden may, if the scroll bar..


5,Offbeat IE6,7

Write tests, found another problem, in the ie6,7 without following the code style, the page will appear vertical scroll bar … … here is mainly for the HTML label use, but I used the *.

    *{
        overflow:auto;
    }

This problem can be verified by testing other webpage with ie7,6, such as Google home page, ^_^ did not think even Baidu has not appeared the problem, Google actually exist such problems, there are pictures and the truth, on a map, as shown in Figure 6

In fact, the specific think, Otherwise, People speculated that Google so the table is justified, As this paper investigates the problem of similar, In the IE6 (IE7 do not have this problem.), Browse through the Baidu the home page, If lowering the height of the window that the vertical scroll bar appears, The phenomenon is, The horizontal and vertical scroll bar also appeared in the … … (baidu home page set up HTML{overflow-y:auto;}, As I added *{overflow:auto}., So my page also appeared the phenomenon of -_-b) embarrassingly said, This phenomenon as this problem is very similar, But the problem discussed in this paper is the horizontal scroll bar leads to the vertical scroll bar, And Baidu home is an arbitrary scrollbar will lead to another scroll bar. As shown in Figure 7.

Through verification, most of the webpage in IE6 or the existence of such a phenomenon, so Google is indeed still let people can accept.

If you want to pursue the perfect words, should be the only through the JS to operate. Do not know if a friend has another way? Please enlighten!

In IE8, chrome browsing found clearly under no content, there always exists a scroll bar … … as shown in Figure 8 is very strange, to know a friend tell us your opinion, why?


6,In pursuit of perfect I*^_^*

 Because the test code I came along and Baidu home page in the IE6, so I have to further improve the test code. As for the discussion of the specific reasons for this problem and the problem should be the same, but the problem is occurring in the HTML tag elements, so its particularity one can imagine, so in IE7 under the normal, but in IE6 would be a problem.

So I will the package, written in a method, temporary write, not thin side, inadequate excuse me, there is a proposal or better please discuss, thank you. As shown in the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Scroll in IE 6, 7</title>
</head>
<script src="jquery-1.8.0.min.js"></script>
<style>
    *{
        margin:0;
        padding:0;
        overflow:auto;
    }
</style>
<script>
    function dealScroll($arr){
        $(window).resize(function(){
            $.each($arr,function(index,item){
                var $target = item.target;
                var debug = item.debug;
                var w = $target.width();
                var h = $target.height();
                var $children = $target.children();
                var sw = 0;
                var sh = 0;
                $children.each(function(){
                    sw+=$(this).outerWidth();
                    sh+=$(this).outerHeight();
                });
                if(h<sh){
                    $target.css("overflow-y","scroll");
                }else{
                    $target.css("overflow-y","hidden");
                }
                if(w<sw){
                    $target.css("overflow-x","scroll");
                }else{
                    $target.css("overflow-x","hidden");
                }
                if(debug){
                    alert("width:"+w+" height:"+h+",inwidth"+sw+" inheight"+sh);
                }
            });
        });
    }
    
    $(function(){
        dealScroll([{target:$("#outdiv")},{target:$("html")}]);//The incoming target is a single element, and an array of processing, The best sequence, from the inside to the outside
    });
</script>
<body>
    <div id="outdiv" style="width:100%;background-color:purple;">
        <div id="indiv" style="width:700px;height:600px;background-color:gray;margin:auto;border-bottom:5px solid red;border-left:5px solid yellow;border-top:5px solid black;border-right:5px solid green;">
        </div>
    </div>
</body>
</html>

Treatment of similar Baidu home on the embarrassing phenomenon can be as basic method.

Here today, the day is black … … a day later … … IE + Tucao looked down again(6)……

Tomorrow is the Dragon Boat Festival, want to eat dumplings.!

This paper takes half a day: ……

Reference article:

 Transverse rolling solution of IE6

 How much is the scroll bar width?

 IE6 under the null label height

 The calculated width of the scroll bar page


Posted by Fannie at November 18, 2013 - 1:33 PM