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