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>
如上方法基本可以處理類似百度首頁上的難堪的現象了。
今天就到這里了，天都黑了…… 一天時間過去了…… 再次鄙視+吐槽下IE(6)……
明天端午節，想去吃粽子呢！
文章耗時：大半天的時間……
參考文章：
http://www.jb51.net/web/23780.html ie6下出現橫向滾動條的解決方案
http://www.cnblogs.com/MakethingsEasy/archive/2011/12/08/2280661.html 滾動條寬度到底是多少？
http://blog.sina.com.cn/s/blog_532751d90100etgw.html ie6下空標簽高度
http://www.cnblogs.com/birdshome/archive/2005/07/02/184928.html 計算頁面中滾動條的寬度