爱华网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> <div> </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> <div> </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"> <div id="indiv"> </div> <div id="helpdiv"></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> <div> </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> <div> </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"> <div id="indiv"> </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"> <div id="indiv"> </div> </div></body></html>
如上方法基本可以处理类似百度首页上的难堪的现象了。
今天就到这里了，天都黑了…… 一天时间过去了…… 再次鄙视+吐槽下IE(6)……
明天端午节，想去吃粽子呢！
文章耗时：大半天的时间……
参考文章：
http://www.jb51.net/web/23780.htmlie6下出现横向滚动条的解决方案
http://www.cnblogs.com/MakethingsEasy/archive/2011/12/08/2280661.html滚动条宽度到底是多少？
http://blog.sina.com.cn/s/blog_532751d90100etgw.htmlie6下空标签高度
http://www.cnblogs.com/birdshome/archive/2005/07/02/184928.html计算页面中滚动条的宽度
