IE6、7下，寬度100%時(shí)，滾動(dòng)條隱顯的不可控問(wèn)題IE6、7是IE中我們所認(rèn)識(shí)的元老級(jí)版本了，對(duì)于其兼容問(wèn)題我一向是置之不理（確切的說(shuō)是沒(méi)有那個(gè)能力吧），因?yàn)闆](méi)有哪個(gè)看此文的朋友用著這個(gè)瀏覽器，但是卻偏偏有那么一些群體堅(jiān)定不移的使用者…… 鑒于項(xiàng)目開(kāi)發(fā)需要，因此不得已而為之，最近遇到了滾動(dòng)條問(wèn)題，所以有此文，本文也是我深入學(xué)習(xí)的一個(gè)過(guò)程吧。 問(wèn)題描述：IE6、7下，當(dāng)外div寬度width:100%，內(nèi)部div固定寬度大于外div顯示寬度時(shí)，外部div同時(shí)出現(xiàn)橫豎滾動(dòng)條的問(wèn)題 PS:鑒于分辨率不同可能影響使用本文代碼所帶來(lái)的效果，所以我自曝下，寫(xiě)本文并測(cè)試時(shí)所用分辨率：筆記本1366*768。 1、問(wèn)題現(xiàn)！ 先上代碼和效果圖。（注：本例問(wèn)題只在ie6、7下出現(xiàn)，其余瀏覽器正常。  <!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%，高度自適應(yīng)；內(nèi)div有固定寬度和高度，并居中，另外右下邊框可見(jiàn)，便于進(jìn)行測(cè)試用。在ie7下效果圖如下（ie6下就不截圖了，搭個(gè)環(huán)境太麻煩了>_<），見(jiàn)圖1、2，圖3為ie8下的正常顯示效果。
2、問(wèn)題解？ 至于為啥在ie6、7下會(huì)出現(xiàn)如此顯示問(wèn)題，只能問(wèn)微軟去了，至少我不清楚，有知道的朋友交流下，留個(gè)言~_~ 一般朋友遇到出現(xiàn)不該出現(xiàn)的滾動(dòng)條，想必會(huì)如此處理。因?yàn)橥鈊iv的overflow是加auto的，那么對(duì)xy軸分別設(shè)置下，讓x軸自動(dòng)，讓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所示：
縱向滾動(dòng)條確實(shí)不見(jiàn)了，但是問(wèn)題也隨之而來(lái)，細(xì)心的朋友已經(jīng)發(fā)現(xiàn)了不對(duì)勁的地方，前面我加的邊框線似乎少了一條，對(duì)滴，少了條鮮紅的。為啥消失了呢？其實(shí)是這樣的，雖然縱向的滾動(dòng)條沒(méi)了，但是本身縱向的滾動(dòng)條并不是無(wú)緣無(wú)故出現(xiàn)的，出現(xiàn)滾動(dòng)條的直接原因是內(nèi)容超出了顯示范圍了，當(dāng)前的情況也是如此，因?yàn)閮?nèi)div的高度比外div顯示區(qū)域的高度高，然后overflow-y:hidden讓超出的內(nèi)容不可見(jiàn)了（沒(méi)了滾動(dòng)條，如何滾到下面去顯示它呢？） 也許你不在乎這點(diǎn)不顯示的范圍，估計(jì)這點(diǎn)高度范圍是16px，即滾動(dòng)條的高度（或者說(shuō)是寬度，下文會(huì)對(duì)此做分析）。 但是如果內(nèi)div既然是固定高度，那么必然有其意義所在，即內(nèi)容顯示的完整與否，超出部分的東西顯示不了了，那么明顯讓使用者摸不著頭腦。 3、自己解解看 既然隱藏了約16px高的內(nèi)容，那么就多給它加16px的高度吧，這樣就顯示了哈，想法不錯(cuò)吧！不錯(cuò)這里的測(cè)試案例似乎不行，因?yàn)檫吙蚩偸窃谶吘壍陌?，即便高度增加了也是如此。如果是固定高度的table，那么還是可行的，只是在不需要滾動(dòng)條的時(shí)候，table下面會(huì)出現(xiàn)額外的空隙。另外ie8上就會(huì)一直出現(xiàn)這個(gè)額外的高度，這個(gè)就需要通過(guò)css hack來(lái)解決了（如：height:固定高度;*height:固定高度+16px;/*ie7*/_height:固定高度+16px;/*ie6*/） 對(duì)于未出現(xiàn)滾動(dòng)條時(shí)的間隙問(wèn)題，似乎只能通過(guò)js來(lái)控制了，這里因本人js較弱，jQuery較熟，就用jQuery寫(xiě)吧>.<，如下代碼 <!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作為參數(shù) 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這個(gè)空div的高度在ie6下默認(rèn)是19px高度，~>.<~ 害我調(diào)了好久…… 對(duì)此問(wèn)題有興趣的朋友可以參見(jiàn)：ie6下空標(biāo)簽高度問(wèn)題，此問(wèn)題我也打算寫(xiě)篇文章研究下的，到時(shí)再鏈接過(guò)來(lái)。 上面代碼主要是在窗口resize時(shí)，判斷內(nèi)外div的寬度來(lái)選擇性的隱藏/顯示helpdiv以實(shí)現(xiàn)內(nèi)div的內(nèi)容不被隱藏。這里helpdiv的高度是16px是根據(jù)我測(cè)試得來(lái)的滾動(dòng)條的寬度（橫向滾動(dòng)條估計(jì)叫高度吧-_-b），但是滾動(dòng)條的高度是否是不變的呢？我百度了下，發(fā)現(xiàn)此文滾動(dòng)條寬度到底是多少？，居然滾動(dòng)條的寬度跟分辨率相關(guān)…… 由于時(shí)間和條件緣故，本人未做測(cè)試，有心人士可以試試看，有結(jié)果也請(qǐng)留言下，謝謝配合。 4、尋找更好的方法 鑒于滾動(dòng)條的寬度是變化的，汗顏…… 所以自己想的方法真是不堅(jiān)挺啊，所以網(wǎng)上搜尋了下，得出如下方法，由于未作其他分辨率測(cè)試，未知結(jié)果如何，估計(jì)沒(méi)啥問(wèn)題。 這個(gè)方法處理此問(wèn)題的關(guān)鍵還是overflow這個(gè)樣式的設(shè)置問(wèn)題。 1）分析問(wèn)題的原因：ie6是個(gè)老古董，調(diào)試起來(lái)很不便，所以這里只能通過(guò)ie7、8來(lái)分析下，通過(guò)F12調(diào)出開(kāi)發(fā)人員工具來(lái)進(jìn)行分析。代碼以最初的代碼為例。  <!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下問(wèn)題為啥不會(huì)出現(xiàn)？ 這里就不截圖了，文字可以說(shuō)明清楚的，在ie8下未出現(xiàn)滾動(dòng)條時(shí)，外div高度是605px，內(nèi)div的高度也是605px（邊框算在內(nèi)）。當(dāng)出現(xiàn)橫向滾動(dòng)條時(shí)，外div的高度是621px，內(nèi)div的高度還是605px，可見(jiàn)外div從605px增加了16px，即滾動(dòng)條的高度，那么外div還是有605px給予內(nèi)div來(lái)顯示的，所以縱向并未出現(xiàn)滾動(dòng)條。 1.2）ie7、6下為啥有問(wèn)題？ 在ie7下，未出現(xiàn)滾動(dòng)條時(shí)，外div高度是605px，內(nèi)div高度也是605px（邊框算在內(nèi)），這里無(wú)誤。但當(dāng)出現(xiàn)滾動(dòng)條時(shí)，外div和內(nèi)div的高度都未變化，但是橫向滾動(dòng)條出場(chǎng)了，它出現(xiàn)了在了外div的高度內(nèi)，所以外div只有589px的高度給予內(nèi)div顯示，那么既然無(wú)法全部顯示，則縱向滾動(dòng)條也就跑出來(lái)了。 1.3）分析，可見(jiàn)滾動(dòng)條的高度在我本本上是16px，在ie8下外div的高度會(huì)因?yàn)闈L動(dòng)條的出現(xiàn)而增；但是在ie7、6下外div卻一直保持不變，這個(gè)就是原因所在了吧，至于為啥會(huì)如此，只能問(wèn)微軟了，或者有啥大神有想法的？
2）解決問(wèn)題的原理：上面說(shuō)了問(wèn)題的關(guān)鍵是overflow，這里看看，它如何起到關(guān)鍵作用的。 對(duì)上面分析問(wèn)題的代碼做一個(gè)針對(duì)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> 經(jīng)過(guò)測(cè)試，如此一來(lái)，就不會(huì)出現(xiàn)縱向滾動(dòng)條了，而外div一直將是621px，而內(nèi)div則一直是605px，這說(shuō)明滾動(dòng)條即16px一直存在著，即便內(nèi)div寬度小于外div寬度，如圖5所示。
雖然在外div寬度小于內(nèi)div寬度時(shí)，顯示沒(méi)有問(wèn)題了，但是在外div寬度大于內(nèi)div寬度時(shí)，卻出了問(wèn)題……
3）解決問(wèn)題：不廢話了，直接解決問(wèn)題吧，我肚子餓了…… 由于沒(méi)有最直接的方法，因此還是需要借助js來(lái)動(dòng)態(tài)控制以解決滾動(dòng)條不該出現(xiàn)的情況。代碼如下： <!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();//獲取含邊框和空隙的寬度，其實(shí)可以直接用這個(gè)獲取寬度，這里算是我換蛇添足了…… }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作為參數(shù) 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下，本文開(kāi)頭所述的問(wèn)題解決了，^_^ 要點(diǎn)是：如果outdiv寬度小于indiv寬度，則把outdiv的overflow-x設(shè)置成scroll讓滾動(dòng)條一直出現(xiàn)，如此則outdiv高度將變?yōu)?21px，即在原基礎(chǔ)上加上了滾動(dòng)條的高度；反之則把outdiv的overflow-x設(shè)置成auto或者h(yuǎn)idden也許，即使讓滾動(dòng)條滾蛋啦。
5、另類(lèi)的ie6、7 在編寫(xiě)測(cè)試代碼時(shí)，發(fā)現(xiàn)了另外的問(wèn)題，在ie6、7不加如下樣式代碼，頁(yè)面會(huì)一直出現(xiàn)縱向滾動(dòng)條…… 這里主要還是針對(duì)最外的html這個(gè)標(biāo)簽使用的，只是我用了*而已。 *{ overflow:auto; } 這個(gè)問(wèn)題可以通過(guò)用ie7、6測(cè)試其他網(wǎng)頁(yè)來(lái)驗(yàn)證，如google的首頁(yè)，^_^ 沒(méi)想到連百度都沒(méi)出現(xiàn)這個(gè)問(wèn)題，谷歌居然存在這樣的問(wèn)題，有圖有真相，上個(gè)圖，如圖6所示 其實(shí)具體想想，不然，個(gè)人推測(cè)谷歌這么放著也是有其道理的，就如本文探討的問(wèn)題類(lèi)似，在ie6下（ie7沒(méi)有這個(gè)問(wèn)題），在瀏覽百度首頁(yè)時(shí)，如果調(diào)低窗口高度使縱向滾動(dòng)條出現(xiàn)，隨之而來(lái)的現(xiàn)象是，橫縱滾動(dòng)條也出現(xiàn)了……（百度首頁(yè)設(shè)置了html{overflow-y:auto;}，如同我上面加的*{overflow:auto}一樣，因此我的頁(yè)面也出現(xiàn)了這個(gè)現(xiàn)象-_-b） 比較難堪的說(shuō)，這個(gè)現(xiàn)象就如本文的問(wèn)題很類(lèi)似，只是本文探討的問(wèn)題是橫向滾動(dòng)條引出了縱向滾動(dòng)條，而百度首頁(yè)是任意一個(gè)滾動(dòng)條都會(huì)引出另外一個(gè)滾動(dòng)條。如圖7所示。 經(jīng)驗(yàn)證，大部分網(wǎng)頁(yè)在ie6下還是存在著這樣的現(xiàn)象，如此谷歌的做法確實(shí)還是讓人能接受些。 如果要追求完美的話，應(yīng)該是只能通過(guò)如上的js來(lái)操作了。不知道是否有朋友有另外的法子？請(qǐng)留言賜教！
另外在ie8、chrome上瀏覽時(shí)發(fā)現(xiàn)明明底下沒(méi)內(nèi)容了，卻一直存在著滾動(dòng)條…… 如圖8所示 甚是奇怪，有知道的朋友說(shuō)說(shuō)看，為啥？
6、追逐完美的我*^_^* 由于本人的測(cè)試代碼的在ie6下出現(xiàn)與百度首頁(yè)一樣的情況，所以我就此進(jìn)一步完善下測(cè)試代碼。至于此問(wèn)題的具體原因跟本文探討的問(wèn)題應(yīng)該一樣，只是該問(wèn)題是發(fā)生在html標(biāo)簽元素上，所以其特殊性可想而知，所以在ie7下正常，但在ie6下就有問(wèn)題了。 所以我將其封裝了下，寫(xiě)成個(gè)方法，臨時(shí)寫(xiě)的，未進(jìn)行細(xì)側(cè)，不足之處見(jiàn)諒，有建議或更好的方法請(qǐng)留言探討，謝謝。如下代碼所示 <!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是單元素，并為處理數(shù)組情況，最好按順序吧，從內(nèi)到外 }); </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> 如上方法基本可以處理類(lèi)似百度首頁(yè)上的難堪的現(xiàn)象了。 今天就到這里了，天都黑了…… 一天時(shí)間過(guò)去了…… 再次鄙視+吐槽下IE(6)…… 明天端午節(jié)，想去吃粽子呢！ 文章耗時(shí)：大半天的時(shí)間…… 參考文章： http://www.jb51.net/web/23780.html ie6下出現(xiàn)橫向滾動(dòng)條的解決方案 http://www.cnblogs.com/MakethingsEasy/archive/2011/12/08/2280661.html 滾動(dòng)條寬度到底是多少？ http://blog.sina.com.cn/s/blog_532751d90100etgw.html ie6下空標(biāo)簽高度 http://www.cnblogs.com/birdshome/archive/2005/07/02/184928.html 計(jì)算頁(yè)面中滾動(dòng)條的寬度 |
|
|
來(lái)自： 沽渡 > 《CSS學(xué)習(xí)》
