IE6、7下,宽度100%时,滚动条隐显的不可控问题 可控硅触发脉冲宽度

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> <div> </div> </div></body></html>

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







2、问题解?

至于为啥在ie6、7下会出现如此显示问题,只能问微软去了,至少我不清楚,有知道的朋友交流下,留个言~_~
IE6、7下,宽度100%时,滚动条隐显的不可控问题 可控硅触发脉冲宽度

一般朋友遇到出现不该出现的滚动条,想必会如此处理。因为外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计算页面中滚动条的宽度

  

爱华网本文地址 » http://www.aihuau.com/a/25101014/205909.html

更多阅读

Windows 7下VPN服务器架设攻略 ipsec vpn服务器架设

Windows 7下VPN服务器架设攻略——简介 由于工作经常出差的关系常常移动办公,因此资料的传递、与公司信息的及时交流或是累了想在异地打开公司或家里的电脑看看电影等等应用显得很头疼。这方面的应用也就是说要通过INTERNET进行安全

物以稀为贵,人以贵为尊 ——中国人口问题对话六 物以稀为贵

【编者按:这是一篇虚拟的对话。来源于“人口问题发言人”(简称“发言人”)平日里与朋友们的交谈,以及在网络上发言人与各色人等的交流记录,还有发言人与假设的提问者之间的会话。与发言人对话的所有对象统称为“对话者”。】对话者:上两次

声明:《IE6、7下,宽度100%时,滚动条隐显的不可控问题 可控硅触发脉冲宽度》为网友深雨燕紛飛分享!如侵犯到您的合法权益请联系我们删除