IE6、7下，宽度100%时，滚动条隐显的不可控问题

沽渡 2013-11-28

展开全文

IE6、7下，宽度100%时，滚动条隐显的不可控问题

IE6、7是IE中我们所认识的元老级版本了，对于其兼容问题我一向是置之不理（确切的说是没有那个能力吧），因为没有哪个看此文的朋友用着这个浏览器，但是却偏偏有那么一些群体坚定不移的使用者……

鉴于项目开发需要，因此不得已而为之，最近遇到了滚动条问题，所以有此文，本文也是我深入学习的一个过程吧。

问题描述：IE6、7下，当外div宽度width:100%，内部div固定宽度大于外div显示宽度时，外部div同时出现横竖滚动条的问题

PS:鉴于分辨率不同可能影响使用本文代码所带来的效果，所以我自曝下，写本文并测试时所用分辨率：笔记本1366*768。

1、问题现！

先上代码和效果图。（注：本例问题只在ie6、7下出现，其余浏览器正常。

<!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宽度100%，高度自适应；内div有固定宽度和高度，并居中，另外右下边框可见，便于进行测试用。在ie7下效果图如下（ie6下就不截图了，搭个环境太麻烦了>_<），见图1、2，图3为ie8下的正常显示效果。

2、问题解？

至于为啥在ie6、7下会出现如此显示问题，只能问微软去了，至少我不清楚，有知道的朋友交流下，留个言~_~

一般朋友遇到出现不该出现的滚动条，想必会如此处理。因为外div的overflow是加auto的，那么对xy轴分别设置下，让x轴自动，让y轴隐藏，如此：

<!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>

显示效果如下图4所示：

纵向滚动条确实不见了，但是问题也随之而来，细心的朋友已经发现了不对劲的地方，前面我加的边框线似乎少了一条，对滴，少了条鲜红的。为啥消失了呢？其实是这样的，虽然纵向的滚动条没了，但是本身纵向的滚动条并不是无缘无故出现的，出现滚动条的直接原因是内容超出了显示范围了，当前的情况也是如此，因为内div的高度比外div显示区域的高度高，然后overflow-y:hidden让超出的内容不可见了（没了滚动条，如何滚到下面去显示它呢？）

也许你不在乎这点不显示的范围，估计这点高度范围是16px，即滚动条的高度（或者说是宽度，下文会对此做分析）。

但是如果内div既然是固定高度，那么必然有其意义所在，即内容显示的完整与否，超出部分的东西显示不了了，那么明显让使用者摸不着头脑。

3、自己解解看

既然隐藏了约16px高的内容，那么就多给它加16px的高度吧，这样就显示了哈，想法不错吧！不错这里的测试案例似乎不行，因为边框总是在边缘的啊，即便高度增加了也是如此。如果是固定高度的table，那么还是可行的，只是在不需要滚动条的时候，table下面会出现额外的空隙。另外ie8上就会一直出现这个额外的高度，这个就需要通过css hack来解决了（如：height:固定高度;*height:固定高度+16px;/*ie7*/_height:固定高度+16px;/*ie6*/）

对于未出现滚动条时的间隙问题，似乎只能通过js来控制了，这里因本人js较弱，jQuery较熟，就用jQuery写吧>.<，如下代码

<!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();//获取含边框和空隙的宽度
            }else{
                return $("#"+id).width();//获取width
            }
        }
        $(window).resize(function(){
            var vstr = $.browser.version;
            if($.browser.msie&&(vstr =='6.0')||vstr=='7.0'){ //判断ie6、7浏览器
                var outW = $("#outdiv").width();
                var inW = getWidth("indiv",true);//获取宽度，这里由于有边框，所以外加true作为参数
                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>

上面代码中的灰色背景部分的样式在ie6下比加，不然helpdiv这个空div的高度在ie6下默认是19px高度，~>.<~ 害我调了好久…… 对此问题有兴趣的朋友可以参见：ie6下空标签高度问题，此问题我也打算写篇文章研究下的，到时再链接过来。

上面代码主要是在窗口resize时，判断内外div的宽度来选择性的隐藏/显示helpdiv以实现内div的内容不被隐藏。这里helpdiv的高度是16px是根据我测试得来的滚动条的宽度（横向滚动条估计叫高度吧-_-b），但是滚动条的高度是否是不变的呢？我百度了下，发现此文滚动条宽度到底是多少？，居然滚动条的宽度跟分辨率相关…… 由于时间和条件缘故，本人未做测试，有心人士可以试试看，有结果也请留言下，谢谢配合。

4、寻找更好的方法

鉴于滚动条的宽度是变化的，汗颜…… 所以自己想的方法真是不坚挺啊，所以网上搜寻了下，得出如下方法，由于未作其他分辨率测试，未知结果如何，估计没啥问题。

这个方法处理此问题的关键还是overflow这个样式的设置问题。

1）分析问题的原因：ie6是个老古董，调试起来很不便，所以这里只能通过ie7、8来分析下，通过F12调出开发人员工具来进行分析。代码以最初的代码为例。

<!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下问题为啥不会出现？

这里就不截图了，文字可以说明清楚的，在ie8下未出现滚动条时，外div高度是605px，内div的高度也是605px（边框算在内）。当出现横向滚动条时，外div的高度是621px，内div的高度还是605px，可见外div从605px增加了16px，即滚动条的高度，那么外div还是有605px给予内div来显示的，所以纵向并未出现滚动条。

1.2）ie7、6下为啥有问题？

在ie7下，未出现滚动条时，外div高度是605px，内div高度也是605px（边框算在内），这里无误。但当出现滚动条时，外div和内div的高度都未变化，但是横向滚动条出场了，它出现了在了外div的高度内，所以外div只有589px的高度给予内div显示，那么既然无法全部显示，则纵向滚动条也就跑出来了。

1.3）分析，可见滚动条的高度在我本本上是16px，在ie8下外div的高度会因为滚动条的出现而增；但是在ie7、6下外div却一直保持不变，这个就是原因所在了吧，至于为啥会如此，只能问微软了，或者有啥大神有想法的？

2）解决问题的原理：上面说了问题的关键是overflow，这里看看，它如何起到关键作用的。

对上面分析问题的代码做一个针对overflow的小修改：

<!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>

经过测试，如此一来，就不会出现纵向滚动条了，而外div一直将是621px，而内div则一直是605px，这说明滚动条即16px一直存在着，即便内div宽度小于外div宽度，如图5所示。

虽然在外div宽度小于内div宽度时，显示没有问题了，但是在外div宽度大于内div宽度时，却出了问题……

3）解决问题：不废话了，直接解决问题吧，我肚子饿了……

由于没有最直接的方法，因此还是需要借助js来动态控制以解决滚动条不该出现的情况。代码如下：

<!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();//获取含边框和空隙的宽度，其实可以直接用这个获取宽度，这里算是我换蛇添足了……
            }else{
                return $("#"+id).width();//获取width
            }
        }
        $(window).resize(function(){
            var vstr = $.browser.version;
            if($.browser.msie&&(vstr =='6.0')||vstr=='7.0'){ //判断ie6、7浏览器
                var outW = $("#outdiv").width();
                var inW = getWidth("indiv",true);//获取宽度，这里由于有边框，所以外加true作为参数
                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>

如此，在ie6、7下，本文开头所述的问题解决了，^_^

要点是：如果outdiv宽度小于indiv宽度，则把outdiv的overflow-x设置成scroll让滚动条一直出现，如此则outdiv高度将变为621px，即在原基础上加上了滚动条的高度；反之则把outdiv的overflow-x设置成auto或者hidden也许，即使让滚动条滚蛋啦。

5、另类的ie6、7

在编写测试代码时，发现了另外的问题，在ie6、7不加如下样式代码，页面会一直出现纵向滚动条…… 这里主要还是针对最外的html这个标签使用的，只是我用了*而已。

    *{
        overflow:auto;
    }

这个问题可以通过用ie7、6测试其他网页来验证，如google的首页，^_^ 没想到连百度都没出现这个问题，谷歌居然存在这样的问题，有图有真相，上个图，如图6所示

其实具体想想，不然，个人推测谷歌这么放着也是有其道理的，就如本文探讨的问题类似，在ie6下（ie7没有这个问题），在浏览百度首页时，如果调低窗口高度使纵向滚动条出现，随之而来的现象是，横纵滚动条也出现了……（百度首页设置了html{overflow-y:auto;}，如同我上面加的*{overflow:auto}一样，因此我的页面也出现了这个现象-_-b）比较难堪的说，这个现象就如本文的问题很类似，只是本文探讨的问题是横向滚动条引出了纵向滚动条，而百度首页是任意一个滚动条都会引出另外一个滚动条。如图7所示。

经验证，大部分网页在ie6下还是存在着这样的现象，如此谷歌的做法确实还是让人能接受些。

如果要追求完美的话，应该是只能通过如上的js来操作了。不知道是否有朋友有另外的法子？请留言赐教！

另外在ie8、chrome上浏览时发现明明底下没内容了，却一直存在着滚动条…… 如图8所示甚是奇怪，有知道的朋友说说看，为啥？

6、追逐完美的我*^_^*

由于本人的测试代码的在ie6下出现与百度首页一样的情况，所以我就此进一步完善下测试代码。至于此问题的具体原因跟本文探讨的问题应该一样，只是该问题是发生在html标签元素上，所以其特殊性可想而知，所以在ie7下正常，但在ie6下就有问题了。

所以我将其封装了下，写成个方法，临时写的，未进行细侧，不足之处见谅，有建议或更好的方法请留言探讨，谢谢。如下代码所示

<!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")}]);//传入的target是单元素，并为处理数组情况，最好按顺序吧，从内到外
    });
</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>