前端編程提高之旅（三）----瀏覽器兼容之IE6 · 前端開發提高之旅

在愛奇藝實習期間，樂帝主要負責移動端活動頁面的制作，由于移動瀏覽器是隨著智能手機興起的，這就決定了移動端不會重蹈瀏覽器兼容問題的覆轍，一開始就比較好的支持web標準，而縱觀整個互聯網行業，移動web開發還處于起步階段，在很長一段時間pc端web作為主要的服務形式還會繼續。從小來說作為一名前端開發人員，不了解瀏覽器兼容也會貽笑大方。這篇文章基于[《IE7web標準之道》](http://www.cnblogs.com/JustinYoung/category/126369.html)，對瀏覽器兼容做一個概覽。時間到了2014年，大概很少人會想到IE7發布之后，時隔這么多年IE6仍然占據市場7%的瀏覽器份額。如果開發面向大眾的產品，7%的份額仍然不可忽視。百度提供了[一個統計界面](http://#baidu.com/data/browser)可查看瀏覽器份額，IE8和chrome占據了主要市場，在未來的一段時期內IE6仍然“發揮余熱”。那么來看看IE6兼容問題。 **1.沒有那么多選擇器** ~~~ <style type="text/css"> a[target="_blank"]{ padding-right:16px; background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/common/outLink.gif') no-repeat right; } </style> </head> <body> <p> <a href="#" title="我不會跳轉到其他網站，不會再新窗口打開">我不會跳轉到其他網站，不會再新窗口打開</a> </p> <p> <a href="http://www.163.com" title="我會跳轉到其他的網站，會在新窗口打開" target="_blank">我會跳轉到其他的網站，會在新窗口打開</a> </p> </body> ~~~ ** 這段代碼給出了鏈接是否會跳轉走的提示樣式，像這樣的選擇器，如樂帝入行不久的人，用的都比較自然，讀史使人明智，不讀瀏覽器的進化史，不知IE6有多原始，IE6對比較復雜的css選擇器都不支持，所以開發面向IE6的代碼時，css選擇器“簡單粗暴”是比較好的方式。** ** ~~~ <style type="text/css"> #txtName{ border:1px solid #eee; } #txtName:hover{ border:1px solid black; } </style> </head> <body> <input type="text" id="txtName" /> </body> ~~~ **IE6是不支持任意元素實現偽類的。這一點比較現代的css偽類選擇器的確使網頁效果更絢麗。至于還有哪些不能用請參考（[此頁面](http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_selector.html)）。** **2.IE6到現代瀏覽器引起布局混亂的原因** **w3c只是說，超出容器的內部不會被剪切。但是它并沒有說，超出來的內容可以“撐開”容器。所以下面這個例子中IE7和FireFox的解釋和渲染是正確的，而IE6則是錯誤的（因為它錯誤的認為，只有讓容器內的內容“撐開”容器，才能讓容器內的內容在超出時不被剪切）。** ~~~ <style type="text/css"> #div1{ border:1px solid red; width:50px; /*word-wrap: break-word; */ /*不允許內容撐開父容器，否則會出現IE6與其他瀏覽器布局顯示不一致，造成混亂的問題，overflow: hidden;會影響內容正常顯示*/ } </style> </head> <body> <div id="div1"> alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a> </div> ~~~ **![](https://box.kancloud.cn/2016-02-24_56cd5e409be1a.jpg) ![](https://box.kancloud.cn/2016-02-24_56cd5e40b0b3d.jpg)** **上圖是用IEtest模擬IE6情況下，上述代碼顯示情況，下圖則是現代瀏覽器的顯示情況。不難看出，IE6對內容不會被剪切的理解的確出現了問題。** **出現bug的條件：** 1. 無論是“寬度”的內容過長，還是“高度”的內容過長，都會引發此bug。 1. 無論是文字、圖片，還是任意有寬度和高度概念的“可見元素”，它們的“過寬”和“過高”都會引發此bug。 1. 任意有寬度和高度概念的“可見元素”,它們在默認狀態下的“overflow”樣式的值都是“Visible”（即使你沒有設置這個樣式） ?從條件不難看出，圖片或者文字內容超出父級div原有設置大小，都會觸發bug。 **解決方案：** - **設置外層div的css屬性“word-wrap: break-word”解決。** - **用“overflow: hidden”解決。** - **就是根據寬度，將文本截取成多段，在每段后面強制加上換行符。** **以上三種方法都有[各自劣勢](http://www.cnblogs.com/JustinYoung/archive/2008/02/25/IE7_wsRoad_overflow.html)，第一種會造成二次傷害：瀏覽器顯示進一步不一致。第二種方案影響對內容的查看。第三種方案添加了交互。低三種方案函數如下：** ~~~ <script type="text/javascript"> // <![CDATA[ if(document.getElementById && !document.all) wordWarp4ff(6)/*數值6根據寬度需要發生變化*/ function wordWarp4ff(intLen){ var obj=document.getElementById("div1"); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; //每六個字符加一個空格分隔，添加到臨時的字符串中 strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } // ]]> </script> ~~~ [?縱向伸展的bug](http://www.cnblogs.com/JustinYoung/archive/2008/02/25/IE7_wsRoad_overflow.html) **縱向伸展bug解決方案：只要我們讓IE7和FireFox，也能像IE6中那樣根據內容，自適應高度即可。如何才能讓容器在IE7和FireFox中能夠自適應高度呢？其實很簡單，也是IE7的重要改進之一，使用“min-height”樣式。雖然IE7中已經支持“min-height/min-width”和"max-height/max-width"樣式。但是IE6卻不認識這些"min-"、"max-"開頭的樣式，所以，我們還需要使用一個css hack為IE6設置一個“height”，只讓IE6認識，IE7和FireFox都不認識。** ~~~ <style> * { margin: 0; padding: 0; } #header { width: 600px; /*height:50px;注釋掉下面兩句，放出這一句，在FireFox和IE7中便能呈現bug*/ min-height:50px;/*只設置最小高度，讓IE7和FireFox自適應高度*/ _height: 50px;/*采用只有IE6才認識到css hack，讓不認識min-height的IE6也有很好的兼容性。*/ background-color: red; margin:0 auto;/*居中顯示*/ } #body{ width:600px; margin:0 auto;/*居中顯示*/ background-color:blue; } #footer{ width:600px; margin:0 auto; background-color:#666; clear:both;/*clear:both，讓footer在新的一行顯示，很多朋友對clear理解的不夠透徹，我以后會特意出篇文章介紹這個樣式，有興趣的朋友可以關注我的博客http://justinyoung.cnblogs.com*/ } </style> </head> <body> <div id="header"> 這里是頭部的內容。<br/> 可能有網站標題，就像<a target="_blank" href="" title="">博客園</a>博客的標題、副標題。<br/> 也可能有導航欄在這里<br/> <strong>注意這句話在IE7中的顯示1</strong><br/> <strong>注意這句話在IE7中的顯示2</strong><br/> </div> <div id="body"> 這里是主體的內容，隨便你寫啦。我就寫上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標準之道">YES！B/S！</a> <p> 專注于B/S模式的項目。姓名：楊正祎(Justin Young)，程序員，專注于B/S模式的項目開發，擅長于Web標準頁面設計。</p> <p>歡迎你們來為我的博客做客哦，里面有很多關于web標準方面的文章哦。請你們多多指教。</p> <p>最后還要非常華麗的署名——楊正祎</p> <p>日期當然也不能少啦——2008-2-21</p> </div> <div id="footer"> 這里是footer，就放一些版權信息吧。©<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標準之道">YES！B/S！</a> </div> </body> ~~~ **3.IE6重復文字bug** ? ~~~ <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> </head> <body> <div style="width:200px;"> <div style="float:left;"></div>  <div style="float:left;width:200px;">歌劇院的魅影</div> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-02-24_56cd5e41096e3.jpg) ![](https://box.kancloud.cn/2016-02-24_56cd5e4118b6b.jpg) **上圖是上述代碼，在IEtest里IE6情況下顯示情況，下面是現代瀏覽器展示情況，不難看出多出來一個字，即重復字bug。** **出現bug條件：** - 一個容器包含2兩個具有“float”樣式的子容器。 - 第二個容器的寬度大于父容器的寬度，或者父容器寬度減去第二個容器寬度的值小于3。（說到3，這里稍微多說一句——IE7還修正了IE6中的一個bug，bug名字就叫做“3像素bug”） - 在第二個容器前存在注釋（這也是為什么此bug也叫做“IE6注釋bug”的原因）。樂帝查看了注釋bug在ietest不能復現這樣的問題，有待考證。 **解決方案：** - 改變結構，不出現【一個容器包含2兩個具有“float”樣式的子容器】的結構。 - 減小第二個容器的寬度，使父容器寬度減去第二個容器寬度的值大于3，例如將本文示例中第二個子容器的寬度改為197px。 - 去掉所有的注釋。 ——此解決方案的評論：最直接的做法，但是“沒有注釋的代碼”，的確不是一個好的代碼寫作習慣。 - 修正注釋的寫法。將?寫成 ——此解決方案的評論：還不錯的解決方案，但是并不是每個人都對這種注釋寫法很欣賞。 - 在第二個容器后面加一個或者多個<div style="clear"></div>來解決。 ——此解決方案的評論：另人感覺很不爽的解決方案。但是的確能解決。影響網頁效率以上解決方案中，都是針對bug出現的條件針對性的修改，個人認為最后一條解決方案較好。 **4.IE6 div元素一直被select元素覆蓋** **文章中引用了[另外一篇作者文章](http://www.cnblogs.com/JustinYoung/archive/2007/07/18/821868.html)，這里面給出了出現這種情況的案例。** ~~~ <style type="text/css"> #divUp{ z-index:99; position:absolute; background-color:red; width:100; height:18; overflow:hidden; height:60px; } #ddlTest{ width:200; z-index:1; } </style> <body> <div id="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div> <br/> <select id="ddlTest"><option>test0<option>test1<option>test2<option>test3</select> </html> ~~~ ![](https://box.kancloud.cn/2016-02-24_56cd5e412c447.jpg) ![](https://box.kancloud.cn/2016-02-24_56cd5e41753b9.jpg) **上圖分別是在IE6情況下和現代瀏覽器情況下，select與div不同上下層情況。可以看出IE6情況下，select元素不會隨著z-index而隱藏到div下面。** **解決方案：** 在下拉列表上方加一個iframe，然后讓div層浮在iframe上方，同時設置z-index值（div最大），這樣，就能使div“蓋住”下拉列表。 ~~~ <style type="text/css"> body{ font-size:small; } #zindexDiv{ position:absolute; z-index:50; width:expression(this.nextSibling.offsetWidth); height:expression(this.nextSibling.offsetHeight); top:expression(this.nextSibling.offsetTop); left:expression(this.nextSibling.offsetLeft); /*background-color:green;在ff中將這句話放出來，你就會明白京叭、狼狗、主人的比喻*/ } #divUp{ z-index:99; position:absolute; background-color:red; width:100; height:18; overflow:hidden; height:60px; } #ddlTest{ width:200; z-index:1; } </style> <body> <iframe id="zindexDiv" frameborder="0"></iframe> <div id="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div> <br/> <select id="ddlTest"><option>test0<option>test1<option>test2<option>test3</select> </html> ~~~ 5.置換元素與行距的bug **文章首先給出了[置換元素的定義](http://www.cnblogs.com/JustinYoung/archive/2008/03/20/line-height-bug.html)。然后請看示例代碼：** ~~~ <style type="text/css"> #lineheight_bug { line-height: 39px; font-size:14px; background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat; padding:0; padding-left:20px; height:435px; width:530px; border:1px solid red; } </style> </head> <body> <div id="lineheight_bug"> <p>這是一個用來演示line-height bug的實例。它來自《IE7的web標準之道——6：(修正)置換元素與行距bug》一文。而這篇文章是屬于《IE7的web標準之道》系列文章的。《IE7的web標準之道》系列文章是個文章系列，主要講解了IE7相對于IE6各個方面的修正和改進。 <img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/wedgits_red.gif" alt="這就是置換元素的一種" /> 對于網頁設計者從將網頁設計從IE6平穩的過渡到IE7平臺有一定的指導意義。現在《IE7的web標準之道》系列文章已經出道第六篇了。前面五篇的標題分別是：《IE7的web標準之道——1：前言(兼目錄)》 ,《IE7的web標準之道——2：(改進)更豐富的CSS選擇符》 ,《IE7的web標準之道——3：(修正)引起頁面布局混亂的禍首》 , 《IE7的web標準之道——4：(修正)歌劇院魅影bug 》以及《IE7的web標準之道——5：(修正)上去了！終于上去了！》。如果你有興趣，可以訪問http://justinyoung.cnblogs.com/。謝謝。</p> </div> </body> ~~~ **![](https://box.kancloud.cn/2016-02-24_56cd5e41c9ee9.jpg)** 如上圖所見，文字中因為多了一個圖標，使得下面所有的文字都發生了向上的位移，造成嚴重的后果。引起bug的原因：之所以出現了這種bug，是因為IE6錯誤的將帶有置換元素的那行文字的上下半間距，和相鄰的上下兩行的下上半間距合并到了一起。于是，帶有置換元素的那行文字的上下行距就被減少了一半，所以頁面出現了混亂。解決方案： **對那些置換元素設置margin-top和margin-bottom。以便把被“壓縮”的行間距“撐開”。** ~~~ #lineheight_bug img{ _margin:17px 0; _vertical-align: middle; } ~~~ **6.float雙倍margin bug** 這個bug引發的條件極其簡單，只要對塊狀容器元素設置了float和與float相同方向的margin值就會出現。 ~~~ <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,示例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> body{ background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/rule.gif') no-repeat; margin:0;padding:0; } .floatbox { float: left; width: 100px; height: 100px; background-color:deeppink; margin-top: 20px; margin-left:100px; } </style> </head> <body> <div class="floatbox"> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-02-24_56cd5e41e2626.jpg) ![](https://box.kancloud.cn/2016-02-24_56cd5e41f0c2a.jpg) **從上面網頁中的網格刻度線不難看出IE6雙邊距bug問題。** **解決方案：** **1.只要對產生bug的容器設置一個“display:inline;”樣式就可以了。作者詳細分析使用[這種方法不會引起額外的問題](http://www.cnblogs.com/JustinYoung/archive/2008/03/27/double-margin-float-bug.html)。** ~~~ .floatbox { float: left; width: 100px; height: 100px; background-color:deeppink; margin-top: 20px; margin-left:100px; display:inline; /*多設置這個樣式即可消除bug！*/ } ~~~ 2.**通過CSS hack修正bug** **即用只針對IE6的hack寫法，多寫一遍margin-left** ~~~ .floatbox { float: left; width: 100px; height: 100px; background-color:deeppink; margin-top: 20px; margin-left:100px; _margin-left:50px;/*只對IE6其作用的CSS hack，對數值減半*/ } ~~~ **7.[內容隱藏的文章](http://www.cnblogs.com/JustinYoung/archive/2008/04/01/peekaboo-bug.html)，樂帝的IEtest沒有復現，這里不予討論。** **8.邊線的混亂問題** ~~~ <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> .divOuter {/*其實divOuter不是必須的，這里純粹是為了提升視覺沖擊力，你完全可以將其去掉*/ border:5px dashed green; padding:10px; } .divInner { border:3px solid red; padding:10px; } .testDiv1 { border:1px dotted deeppink; margin-top:10px; } .testDiv2 { border:1px solid blue; margin-top:-1px;/*這個是重點*/ } </style> </head> <body> <div class="divOuter"> <div class="divInner"> <div class="testDiv1">我是divInner里的第1個Div區域。我的margin-top是正數。</div> <div class="testDiv2">我是divInner里的第2個Div區域，我的margin-top是負值。</div> </div> </div> </body> </html> ~~~ **出現bug條件：** - **兩個塊狀元素(#testDiv1和#testDiv2)** - **第二個塊狀元素（#testDiv2）有一個負值的margin-top** - **然后把這兩個塊狀元素放在一個大的塊狀元素中（#divInner）** - **當然，為了他們都有可見的邊框線（否則亂了你也看不到）** **解決方案：** 1. **對#divInner設置一個position:relative;** 1. **對#testDiv2也設置一個position:relative;** 1. **對#testDiv2設置一個負值的top，例如top:-1px;** **這里的解決方案總而言之就是采用相對定位，而不是margin-top實現定位，繞過問題也是解決辦法。**