css和js的瀏覽器兼容問題匯總

1、css和js的瀏覽器兼容問題匯總 首先談一下瀏覽器，雖然現(xiàn)在ie依然是瀏覽器市場(chǎng)的老大，大約占有67%的份額，但是由于其各方面的欠缺，用戶開始選擇其他瀏覽器作為自己瀏覽網(wǎng)頁(yè)的主要 工具，比如firefox、theworld、maxthon、chrome、opera等等，在用戶使用比較多的瀏覽器中，分為2大派系ie內(nèi)核和非ie內(nèi)核，像theworld、maxthon、greenbrower等等都屬于ie內(nèi)核，而firefox、chrome、opera則 為非ie內(nèi)核，眾多的瀏覽器使我們的web程序就出現(xiàn)了兼容問題，像ie就有ie 6、ie7、ie8之分，同樣的樣式控制和js腳本，在不同的ie版本

2、中也會(huì)出現(xiàn)不同的效果，甚至bug，何況在非ie內(nèi)核的firefox、 chrome、opera了。從市場(chǎng)份額分析，目前ie依然是瀏覽器市場(chǎng)老大，并會(huì)在很長(zhǎng)一段時(shí)間內(nèi)很難改變，不過我們不能忽略firefox以及其他瀏 覽器的快速成長(zhǎng)，未來我們沒有辦法估計(jì)，很多初級(jí)用戶還沒有看到其他非ie內(nèi)核的優(yōu)勢(shì)，當(dāng)他們發(fā)現(xiàn)時(shí)，我們的在去滿足他們的需求是否已經(jīng)晚了呢，所以我們 必須做到多瀏覽器的兼容。現(xiàn)在市場(chǎng)上大多web開發(fā)著選擇兼容ie7和firefox作為主要兼容對(duì)象，這兩款也是目前用戶使用最多的，那好我們就主要講兼容這兩款瀏覽器。眾多的瀏覽器使我們就要面臨多種瀏覽器測(cè)試的尷尬，比如ie在一臺(tái)機(jī)器上只能安裝

3、一個(gè)版本，我們要測(cè)試程序在ie 3個(gè)版本中的顯示效果，就要在安裝3個(gè)版本的機(jī)器上分別測(cè)試將是一件非常繁瑣的事情，這里推薦一款工具，ietester可以同時(shí)測(cè)試3個(gè)版本的ie程 序，非常不錯(cuò)。至于其他瀏覽器在同一臺(tái)機(jī)器上安裝是沒有問題的，所以我們準(zhǔn)備好了測(cè)試環(huán)境。 Firefox是一款有著豐富插件的瀏覽器，這里我推薦3款web開發(fā)人員必備的開發(fā)工具 - Firebug、web developer、ie tab。 Firebug 是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級(jí)強(qiáng)力推薦插件之一。它集HTML查看和編輯、Javascript控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)Java

4、Script、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個(gè)不同的角度剖析Web頁(yè)面內(nèi)部的細(xì)節(jié)層面，給Web開發(fā)者帶來很大的便利。 Web Developer 插件以工具欄的形式對(duì)網(wǎng)頁(yè)的(X)HTML、腳本、多媒體、CSS、緩存、圖象等多方面的實(shí)用工具。使我們能輕易的獲得網(wǎng)頁(yè)的更多信息，使我們進(jìn)一步的了解當(dāng)前所瀏覽的網(wǎng)頁(yè)。 ie tab是firefox下一款firefox和ie互相切換的插件，這樣開發(fā)人員可以很輕松的一鍵查看2中主流瀏覽器的兼容效果。 以上3款工具具體使用方法到Google、baidu中搜索使用關(guān)鍵字即可。 debugBar是在ie中類似f

5、irebug的工具，不過功能就差很遠(yuǎn)了，不過這里也推薦一下。 Firefox瀏覽器良好支持W3C標(biāo)準(zhǔn)，是目前對(duì)CSS支持最好的瀏覽器，而ie是出現(xiàn)的比較早，在w3c支持方面做的一直不是很好，所以兩種瀏覽器在很多方面不盡相同。下面總結(jié)一下這兩種瀏覽器的兼容問題：1.集合類對(duì)象問題說明: Firefox下,只能使用獲取集合類對(duì)象； IE下,可以使用()或獲取集合類對(duì)象。解決方法:統(tǒng)一使用獲取集合類對(duì)象.2.HTML對(duì)象獲取問題FireFox：document.getElementById(idName);ie: document.idname或者document.getElementById(id

6、Name).解決辦法：統(tǒng)一使用document.getElementById(idName);3.const問題說明: Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來定義常量; IE下,只能使用var關(guān)鍵字來定義常量. 解決方法:統(tǒng)一使用var關(guān)鍵字來定義常量.4.window.event問題說明:window.event只能在IE下運(yùn)行,而不能在Firefox下運(yùn)行,這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用. Firefox必須從源處加入event作參數(shù)傳遞。Ie忽略該參數(shù)，用window.event來讀取該event。解決方法: IE&Firefox: Sub

7、mitted(event)/ function Submitted(evt) evt=evt?evt:(window.event?window.event:null); 5.event.x與event.y問題說明: Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性；:IE下,event對(duì)象有x,y屬性,但是沒有pageX,pageY屬性。解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX. 6.event.srcElement問題說明: Fire

8、fox下,even對(duì)象有target屬性,但是沒有srcElement屬性;IE下,event對(duì)象有srcElement屬性,但是沒有target屬性.解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target. 請(qǐng)同時(shí)注意event的兼容性問題。7.window.location.href問題說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Fire

9、fox1.5.x下,只能使用window.location. 解決方法:使用window.location來代替window.location.href. 8.模態(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.d

10、ocument.getElementById(Aqing).value = Aqing; 9.frame問題以下面的frame為例：(1)訪問frame對(duì)象:IE:使用window.frameId或者window.frameName來訪問這個(gè)frame對(duì)象. frameId和frameName可以同名。Firefox:只能使用window.frameName來訪問這個(gè)frame對(duì)象.另外，在IE和Firefox中都可以使用window.document.getElementById(frameId)來訪問這個(gè)frame對(duì)象.(2)切換frame內(nèi)容:在 IE和Firefox中都可以使用wind

11、ow.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;10.body問題Firefox的body在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標(biāo)簽被瀏覽器完全讀入之后才存在. 11. 事

12、件委托方法IE：document.body.onload = inject; /Function inject()在這之前已被實(shí)現(xiàn)Firefox：document.body.onload = inject(); 12. firefox與IE的父元素(parentElement)的區(qū)別IE：obj.parentElementfirefox：obj.parentNode解決方法: 因?yàn)閒irefox與IE都支持DOM,因此使用obj.parentNode是不錯(cuò)選擇.13.cursor:hand VS cursor:pointer firefox不支持hand，但ie支持pointer解決方法: 統(tǒng)

13、一使用pointer14.innerText在IE中能正常工作，但是innerText在FireFox中卻不行. 需用textContent。解決方法:if(navigator.appName.indexOf(Explorer) -1) document.getElementById(element).innerText = my text; else document.getElementById(element).textContent = my text;15. FireFox中設(shè)置HTML標(biāo)簽的style時(shí)，所有位置性和字體尺寸的值必須后跟px。這個(gè)ie也是支持的。16. ie,fir

14、efox以及其它瀏覽器對(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);17. padding 問題padding 5px 4px 3px 1px FireFox無法解釋簡(jiǎn)寫,必須改成

15、 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;18. 消除ul、ol等列表的縮進(jìn)時(shí)樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效19. CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 20. CSS圓角IE：不支持圓角。 FF： -moz-bord

16、er-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。21. CSS雙線凹凸邊框IE：border:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040

17、 #808080;-moz-border-bottom-colors:#404040 #808080;22. 對(duì)select的options集合操作枚舉元素除了外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在兩種瀏覽器上使用。注意在add后賦值元素，否則會(huì)失敗。23. XMLHTTP的區(qū)別/mfif (window.XMLHttpRequest) /mf xmlhttp=new XMLHttpRequest() xmlhttp.onreadystate

18、change=xmlhttpChange xmlhttp.open(GET,url,true) xmlhttp.send(null) /ieelse if (window.ActiveXObject) / code for IE xmlhttp=new ActiveXObject(Microsoft.XMLHTTP) if (xmlhttp) xmlhttp.onreadystatechange=xmlhttpChange xmlhttp.open(GET,url,true) xmlhttp.send() 24.css中的width和padding在IE7和FF中width寬度不包括paddi

19、ng，在Ie6中包括padding.25.css hack根據(jù)不同瀏覽器對(duì)CSS樣式的支持程度，解析結(jié)果和識(shí)別CSS的優(yōu)先級(jí)不同，設(shè)計(jì)師們就可以根據(jù)這些不同瀏覽器 的特點(diǎn)來書寫不同的CSS樣式代碼。IE6能識(shí)別下劃線_和星號(hào)*，IE7能識(shí)別星號(hào)*，不能識(shí)別下劃線_，而firefox兩個(gè)都不能識(shí)別，如此，就可 以針對(duì)IE6.IE7和FF通過對(duì)這些特殊符號(hào)的使用寫不同的代碼了。divbackground:green; /* for FireFox */*background:red; /* for IE7 */_background:blue; /* for IE6 */該樣式顯示的效果是：在Fi

20、reFox中背景色為green；在IE7中背景色為red；在IE6中背景色為blue。此外，!important聲明也可以很好地提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。在IE6和FF中用!important聲明可以提高優(yōu)先級(jí)別，但在 IE6中 的!important聲明會(huì)被之后的同名屬性定義替換。所以，通過*和!important聲明兩者的搭配也可以很好地解決IE6，IE7和FF三者之 間的兼容性問題。區(qū)別FF，IE7，IE6：background:red; *background:green !important; *background:blue;注：IE都能識(shí)別*;FF不能識(shí)別*；IE6能識(shí)別*，

21、但不能識(shí)別 !important；IE7能識(shí)別*，也能識(shí)別!important;FF不能識(shí)別*，但能識(shí)別!important;針對(duì)IE7/firefox 在css的前面加 xmlns, 如下面的left屬性，如果我想要只針對(duì)IE7/firefox起作用，寫法如下：xmlns #left float:left;border:4px solid #999;padding:5px;width:200px;height:200px;只針對(duì)IE6起作用，可以在css前面加* html,如:* html #left clear:both; 只針對(duì)IE7起作用，在css里前面加*+html,如:*+html #left clear:both;書寫的順序都是FireFox的寫在前面，IE7的寫在中間，IE6的寫在最后面。26.使用IE專用的條件注釋 27.div 的垂直居中問題: vertical-align:middle; 將行距