16 / 16瀏覽器兼容新問題W3C對標準的推進，F(xiàn)irefox，Chrome，Safari，Opera的出現(xiàn)，結(jié)束了IE雄霸天下的日子。 然而，這對開發(fā)者來說，是好事，也是壞事。 說它是好事，是因為瀏覽器廠商為了取得更多的市場份額，會促使各瀏覽器更符合W3C標準，而得到更好的兼容性，并且，不同瀏覽器的擴展功能(例如 -moz，-webkit開頭的樣式)，對W3C標準也是個推進；說它是壞事，因為，多個瀏覽器同時存在，這些瀏覽器在處理一個相同的頁面時，表現(xiàn)有時會有差異。這種差異可能很小，甚至不會被注意到；也可能很大，甚至造成在某個瀏覽器下無法正常瀏覽。我們把引起這些差異的問題統(tǒng)稱為“瀏覽器兼容性問題”。而正是這些“瀏覽器兼容性問題”，無形中給我們的開發(fā)增加了不少難度。 從瀏覽器內(nèi)核的角度 來看，瀏覽器兼容性問題可分為以下三類： 1. 渲染相關(guān)：和樣式相關(guān)的問題，即體現(xiàn)在布局效果上的問題。 2. 腳本相關(guān)：和腳本相關(guān)的問題，包括JavaScript和DOM、BOM方面的問題。對于某些瀏覽器的功能方面的特性，也屬于這一類。 3. 其他類別：除以上兩類問題外的功能性問題，一般是瀏覽器自身提供的功能，在內(nèi)核層之上的。 例如下面的頁面，是一個渲染相關(guān)的問題： 在各個瀏覽器中都表現(xiàn)的不同，這就屬于兼容性問題。 造成瀏覽器兼容性問題的根本原因就是瀏覽器各瀏覽器使用了不同的內(nèi)核，并且它們處理同一件事情的時候思路不同。 現(xiàn)今常見的瀏覽器及其排版引擎（又稱渲染引擎）及腳本引擎，如下： 而造成瀏覽器兼容性問題的常見原因則是設(shè)計師寫出了不規(guī)范的代碼，不規(guī)范的代碼會使不兼容現(xiàn)象更加突出。 例如： 不規(guī)則的嵌套：HTML code 新聞標題一 新聞標題一 新聞標題一DIV 中直接嵌套 LI 元素是不合標準的，LI 應(yīng)該處于 UL 內(nèi)。此類問題常見的還有 P 中嵌套 DIV， TABLE等元素。 不規(guī)范的DOM接口和屬性設(shè)置：JScript codedocument.all.a_name.style.top=35;上面代碼中top的值，其實應(yīng)該是一個字符串值，需有單位。例如：35px。 總之，人為的原因也占很大一部分。而人為造成兼容性問題的原因，除了粗心之外，大都源于瀏覽器bug的存在，和開發(fā)者對標準的不了解。 比如，如果要做一個功能，功能是想讓鼠標懸停在 IMG 元素上方時，可以出現(xiàn)提示信息，經(jīng)常針對 IE 做開發(fā)的人，可能會使用 IMG 元素的 “alt” 屬性，但其他瀏覽器中就是不給 alt 屬性面子。因為 W3C 標準中規(guī)定要去做這件事的屬性是 ”title“，大多瀏覽器符合標準，IE 不符合，這是 IE 瀏覽器內(nèi)核的問題；開發(fā)者不知道 ”title“ 才是正解，不遵循標準去寫代碼，是開發(fā)者的問題。所以，一個問題分兩半，瀏覽器和開發(fā)者都有責任。 既然都有責任，就都有義務(wù)去解決兼容性問題。那么，從瀏覽器的角度來講，它的廠商應(yīng)該修復(fù)瀏覽器的bug和不合標準的地方，當某一天 IE 的 ”alt“ 不能用于提示了，還有人用這個錯誤的屬性去顯示提示么？ 從開發(fā)者角度來講，多了解標準，了解瀏覽器兼容性問題，就可以在開發(fā)的過程中，有效的避開兼容性問題，讓你的頁面在所有瀏覽器中暢通無阻。 廢話少說，下面就講講如何有效的避免一些兼容性問題。JavaScript21.HTML對象獲取問題22.const問題23.event.x與event.y問題24.window.location.href問題25.frame問題36.模態(tài)和非模態(tài)窗口問題37.firefox與IE的父元素(parentElement)的區(qū)別38.document.formName.item(”itemName”) 問題39.集合類對象問題310.自定義屬性問題311.input.type屬性問題312.event.srcElement問題413.body載入問題414.事件委托方法415.Table操作問題416.對象寬高賦值問題4CSS41.cursor:hand VS cursor:pointer42.innerText在IE中能正常工作，但在FireFox中卻不行.43.CSS透明54.css中的width和padding55.FF和IE BOX模型解釋不一致導致相差2px56.IE5 和IE6的BOX解釋不一致57.ul和ol列表縮進問題58.元素水平居中問題59.Div的垂直居中問題510.margin加倍的問題611.IE與寬度和高度的問題612.頁面的最小寬度613.DIV浮動IE文本產(chǎn)生3象素的bug614.IE捉迷藏的問題615.float的div閉合;清除浮動;自適應(yīng)高度716.高度不適應(yīng)817.IE6下圖片下有空隙產(chǎn)生818.對齊文本與文本輸入框819.LI中內(nèi)容超過長度后以省略號顯示820.為什么web標準中IE無法設(shè)置滾動條顏色了921.為什么無法定義1px左右高度的容器922.鏈接(a標簽)的邊框與背景923.超鏈接訪問過后hover樣式就不出現(xiàn)的問題924.FORM標簽925.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)1026.為什么FF下文本無法撐開容器的高度10 JavaScript1. HTML對象獲取問題FireFox：document.getElementById(idName);ie:document.idname或者document.getElementById(idName).解決辦法：統(tǒng)一使用document.getElementById(idName);2. const問題說明:Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來定義常量;IE下,只能使用var關(guān)鍵字來定義常量. 解決方法： 統(tǒng)一使用var關(guān)鍵字來定義常量.3. event.x與event.y問題說明:IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. 解決方法：使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX. 4. window.location.href問題說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location. 解決方法：使用window.location來代替window.location.href. 5. frame問題以下面的frame為例：(1)訪問frame對象:IE:使用window.frameId或者window.frameName來訪問這個frame對象. frameId和frameName可以同名。Firefox:只能使用window.frameName來訪問這個frame對象.另外，在IE和Firefox中都可以使用window.document.getElementById(frameId)來訪問這個frame對象.(2)切換frame內(nèi)容:在 IE和Firefox中都可以使用window.document.getElementById(testFrame).src = xxx.html或window.frameName.location = xxx.html來切換frame的內(nèi)容.如果需要將frame中的參數(shù)傳回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent來訪問父窗口。例如：parent.document.form1.filename.value=Aqing;6. 模態(tài)和非模態(tài)窗口問題說明:IE下,可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口;Firefox下則不能. 解決方法：直接使用window.open(pageURL,name,parameters)方式打開新窗口。如果需要將子窗口中的參數(shù)傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如：var parWin = window.opener; parWin.document.getElementById(Aqing).value = Aqing; 7. firefox與IE的父元素(parentElement)的區(qū)別IE：obj.parentElementfirefox：obj.parentNode解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.8. document.formName.item(”itemName”) 問題問題說明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements elementName；Firefox 下，只能使用document.formName.elementselementName。解決方法：統(tǒng)一使用document.formName.elementselementName。9. 集合類對象問題問題說明：IE下，可以使用 () 或 獲取集合類對象；Firefox下，只能使用 獲取集合類對象。解決方法：統(tǒng)一使用 獲取集合類對象。10. 自定義屬性問題問題說明：IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。解決方法：統(tǒng)一通過 getAttribute() 獲取自定義屬性。11. input.type屬性問題問題說明：IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然后在同樣的位置再插入一個新的input元素。12. event.srcElement問題問題說明：IE下，even對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target;如果考慮第8條問題，就改用myEvent代替event即可。13. body載入問題問題說明：Firefox的body對象在body標簽沒有被瀏覽器完全讀入之前就存在；而IE的body對象則必須在body標簽被瀏覽器完全讀入之后才存在。注 這個問題尚未實際驗證，待驗證后再來修改。注 經(jīng)驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS腳本可以訪問在腳本之前已經(jīng)載入的所有對象和元素，即使這個元素還沒有載入完成。14. 事件委托方法問題說明：IE下，使用 document.body.onload = inject; 其中function inject()在這之前已被實現(xiàn)；在Firefox下，使用 document.body.onload = inject();解決方法：統(tǒng)一使用 document.body.onload=new Function(inject(); 或者 document.body.onload = function()/* 這里是代碼 */注意 Function和function的區(qū)別。15. Table操作問題問題說明：ie、firefox以及其它瀏覽器對于 table 標簽的操作都各不相同，在ie中不允許對table和tr的innerHTML賦值，使用js增加一個tr時，使用appendChild方法也不管用。解決方法：/向table追加一個空行：var row = otable.insertRow(-1);var cell = document.createElement(td);cell.innerHTML = ;cell.className = XXXX;row.appendChild(cell);注 由于俺很少使用JS直接操作表格，這個問題沒有遇見過。建議使用JS框架集來操作table，如JQuery。16. 對象寬高賦值問題問題說明：FireFox中類似 obj.style.height = imgObj.height 的語句無效。 CSS1. cursor:hand VS cursor:pointer firefox不支持hand，但ie支持pointer解決方法: 統(tǒng)一使用pointer2. innerText在IE中能正常工作，但在FireFox中卻不行. 需用textContent。解決方法:if(navigator.appName.indexOf(Explorer) -1) document.getElementById(element).innerText = my text; else document.getElementById(element).textContent = my text;3. CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 4. css中的width和padding在IE7和FF中width寬度不包括padding，在Ie6中包括padding.5. FF和IE BOX模型解釋不一致導致相差2pxbox.stylewidth:100;border 1px; ie理解為 box.width = 100 ff理解為 box.width = 100 + 1*2 = 102 /加上邊框2px 解決方法：divmargin:30px!important;margin:28px;注意這兩個margin的順序一定不能寫反， IE不能識別!important這個屬性，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：divmaring:30px;margin:28px重復(fù)定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx!important;6. IE5 和IE6的BOX解釋不一致IE5下divwidth:300px;margin:0 10px 0 10px;div 的寬度會被解釋為300px-10px(右填充)-10px(左填充)，最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改 divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px7. ul和ol列表縮進問題消除ul、ol等列表的縮進時，樣式應(yīng)寫成：list-style:none;margin:0px;padding:0px;經(jīng)驗證，在IE中，設(shè)置margin:0px可以去除列表的上下左右縮進、空白以及列表編號或圓點，設(shè)置padding對樣式?jīng)]有影響；在 Firefox 中，設(shè)置margin:0px僅僅可以去除上下的空白，設(shè)置padding:0px后僅僅可以去掉左右縮進，還必須設(shè)置list- style:none才 能去除列表編號或圓點。也就是說，在IE中僅僅設(shè)置margin:0px即可達到最終效果，而在Firefox中必須同時設(shè)置margin:0px、 padding:0px以及l(fā)ist-style:none三項才能達到最終效果。8. 元素水平居中問題FF: margin:0 auto;IE: 父級 text-align:center; 9. Div的垂直居中問題vertical-align:middle; 將行距增加到和整個DIV一樣高：line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行。10. margin加倍的問題設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline; 例如： 相應(yīng)的css為 #imfloat float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/11. IE與寬度和高度的問題IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設(shè)置寬度和高度。 比如要設(shè)置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣： #box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;12. 頁面的最小寬度如上一個問題，IE不識別min，要實現(xiàn)最小寬度，可用下面的方法：#container min-width: 600px; width:expression(document.body.clientWidth 600? 600px: auto ); 第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。13. DIV浮動IE文本產(chǎn)生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有3px的間距. #box float:left; width:800px; #left float:left; width:50%; #right width:50%; *html #left margin-right:-3px; /這句是關(guān)鍵 /div /div 14. IE捉迷藏的問題當div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。 有些內(nèi)容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。15. float的div閉合;清除浮動;自適應(yīng)高度 例如：div id=”floatA” div id=”floatB” div id=”NOTfloatC” 這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;) 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在 div class=”floatB” div class=”NOTfloatC”之間加上 div class=”clear”這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。并且將clear這種樣式定義為為如下即可： .clear clear:both; 作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應(yīng)，要在wrapper里面加上overflow:hidden; 當包含float的box的時候，高度自適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE??！)用zoom:1;可以做到，這樣就達到了兼容。 例如某一個wrapper如下定義： .colwrapper overflow:hidden; zoom:1; margin:5px auto; 對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div后面做一個統(tǒng)一的背景,譬如: /div /div /div 比如我們要將page的背景設(shè)置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發(fā)現(xiàn)隨著left center right的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決： /div /div /div 再嵌入一個float left而寬度是100%的DIV解決之。 萬能float 閉合(非常重要!) 關(guān)于 clear float 的原理可參見 How To Clear Floats Without Structural Markup,將以下代碼加入Global CSS 中,給需要閉合的div加上class=clearfix 即可,屢試不爽。/* Clear Fix */ .clearfix:after content:.; display:block; height:0; clear:both; visibility:hidden; .clearfix display:inline-block; /* Hide from IE Mac */ .clearfix display:block; /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設(shè)置：.hackbox display:table; /將對象作為塊元素級的表格顯示16. 高度不適應(yīng)高度不適應(yīng)是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié)，特別是當內(nèi)層對象使用margin 或padding時。 例： #box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; p對象中的內(nèi)容/p 解決技巧：在P對象上下各加2個空的div對象CSS代碼 height:0px;overflow:hidden;或者為DIV加上border屬性。17. IE6下圖片下有空隙產(chǎn)生解決這個BUG的技巧有很多,可以是改變html的排版,或者設(shè)置img為display:block 或者設(shè)置vertical-align屬性為vertical-align:top/bottom/middle/text-bottom 都可以解決.18. 對齊