Firefox與IE相容性代碼全攻略

　　Firefox浏覽器良好支援W3C标準，是目前對CSS支援最好的浏覽器，而ie是出現的比較早，在w3c支援方面做的一直不是很好，是以兩種浏覽器在很多方面不盡相同。

　　下面總結一下這兩種浏覽器的相容問題：

　　1.集合類對象問題

　　說明:IE下,可以使用()或[]擷取集合類對象;

　　Firefox下,隻能使用[]擷取集合類對象.

　　解決方法:統一使用[]擷取集合類對象.

　　2.HTML對象擷取問題

　　FireFox： Javascript代碼 document.getElementById( "idName" ); document.getElementById("idName"); Javascript 代碼 ie:document.idname ie:document.idname 或者 Javascript 代碼 document.getElementById( "idName" ); document.getElementById("idName"); 解決辦法：統一使用 Javascript代碼 document.getElementById( "idName" ); document.getElementById("idName");

　　3.const問題

　　說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;

　　IE下,隻能使用var關鍵字來定義常量.

　　解決方法:統一使用var關鍵字來定義常量.

　　4.window.event問題

　　說明:window.event隻能在IE下運作,而不能在Firefox下運作,這是因為Firefox的event隻能在事件發生的現場使用. Firefox必須從源處加入event作參數傳遞。Ie忽略該參數，用window.event來讀取該event。

　　解決方法:

　　IE&Firefox:

　　Submitted(event)"/> …

　　

　　function Submitted(evt) {

　　evt=evt?evt:(window.event?window.event:null);

　　}

　　

　　5.event.x與event.y問題

　　說明:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;

　　Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性.

　　解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.

　　6.event.srcElement問題

　　說明:IE下,event對象有srcElement屬性,但是沒有target屬性;

　　Firefox下,even對象有target屬性,但是沒有srcElement屬性.

　　解 決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target. 請同時注意event的相容性問題。

　　7.window.location.href問題

　　說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

　　Firefox1.5.x下,隻能使用window.location.

　　解決方法:使用window.location來代替window.location.href.

　　8.模态和非模态視窗問題

　　說明:IE下,可以通過showModalDialog和showModelessDialog打開模态和非模态視窗;Firefox下則不能.

　　解決方法:直接使用window.open(pageURL,name,parameters)方式打開新視窗。

　　如果需要将子視窗中的參數傳遞回父視窗,可以在子視窗中使用window.opener來通路父視窗.

　　例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

　　9.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内容:

　　在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的内容.

　　如果需要将frame中的參數傳回父視窗(注意不是opener,而是parent frame)，可以在frame中使用parent來通路父視窗。例如：parent.document.form1.filename.value="Aqing";

　　10.body問題

　　Firefox的body在body标簽沒有被浏覽器完全讀入之前就存在；而IE的body則必須在body标簽被浏覽器完全讀入之後才存在.

　　11. 事件委托方法

　　IE：document.body.onload = inject; //Function inject()在這之前已被實作

　　Firefox：document.body.onload = inject();

　　12. firefox與IE的父元素(parentElement)的差別

　　IE：obj.parentElement

　　firefox：obj.parentNode

　　解決方法: 因為firefox與IE都支援DOM,是以使用obj.parentNode是不錯選擇.

　　13.cursor:hand VS cursor:pointer

　　firefox不支援hand，但ie支援pointer

　　解決方法: 統一使用pointer

　　14.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中設定HTML标簽的style時，所有位置性和字型尺寸的值必須後跟px。這個ie也是支援的。

　　16. 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);

　　17. padding 問題

　　padding 5px 4px 3px 1px FireFox無法解釋簡寫,

　　必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

　　18. 消除ul、ol等清單的縮進時

　　樣式應寫成:list-style:none;margin:0px;padding:0px;

　　其中margin屬性對IE有效，padding屬性對FireFox有效

　　19. CSS透明

　　IE：filter:progid:DXImageTransform.Microsoft.Alpha(sty le=0,opacity=60)。

　　FF：opacity:0.6。

　　20. CSS圓角

　　IE：不支援圓角。

　　FF： -moz-border-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 #808080;-moz-border-bottom-colors:#404040 #808080;

　　22. 對select的options集合操作

　　枚 舉元素除了[]外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在兩種浏覽器上使用。注意在add後指派元素，否則會失敗。

　　23. XMLHTTP的差別

　　//mf

　　if (window.XMLHttpRequest) //mf

　　{

　　xmlhttp=new XMLHttpRequest()

　　xmlhttp.onreadystatechange=xmlhttpChange

　　xmlhttp.open("GET",url,true)

　　xmlhttp.send(null)

　　}

　　//ie

　　else 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寬度不包括padding，在Ie6中包括padding.

　　25.css hack

　　根據不同浏覽器對CSS樣式的支援程度，解析結果和識别CSS的優先級不同，設計師們就可以根據這些不同浏覽器的特點來書寫不同的CSS樣式代碼。IE6能識别下劃線_和星号*，IE7能識别星号*，不能識别下劃線_，而firefox兩個都不能識别，如此，就可以針對IE6.IE7和FF通過對這些特殊符号的使用寫不同的代碼了。

　　

　　div{

　　background:green;

　　*background:red;

　　_background:blue;

　　}

　　

　　該樣式顯示的效果是：在FireFox中背景色為green；在IE7中背景色為red；在IE6中背景色為blue。

　　此外，!important聲明也可以很好地提升指定樣式規則的應用優先權。在IE6和FF中用!important聲明可以提高優先級别，但在 IE6中的!important聲明會被之後的同名屬性定義替換。是以，通過*和!important聲明兩者的搭配也可以很好地解決IE6，IE7和 FF三者之間的相容性問題。

　　差別FF，IE7，IE6：background:red; *background:green !important; *background:blue;

　　注：IE都能識别*;FF不能識别*；IE6能識别*，但不能識别 !important；IE7能識别*，也能識别!important;FF不能識别*，但能識别!important;

　　針對IE7/firefox 在css的前面加 [xmlns], 如下面的left屬性，如果我想要隻針對IE7/firefox起作用，寫法如下：

　　[xmlns] #left {

　　float:left;

　　border:4px solid #999;

　　padding:5px;

　　width:200px;

　　height:200px;

　　}

　　隻針對IE6起作用，可以在css前面加* html,如:

　　* html #left {

　　clear:both;

　　}

　　隻針對IE7起作用，在css裡前面加*+html,如:

　　*+html #left {

　　clear:both;

　　}

　　書寫的順序都是FireFox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

　　26.使用IE專用的條件注釋

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　27.div 的垂直居中問題: vertical-align:middle; 将行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制内容不要換行

　　28.cursor: pointer 可以同時在 IE FF 中顯示遊标手指狀， hand 僅 IE 可以

　　29.FF: 連結加邊框和背景色 ，需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

　　30.在mozilla firefox和IE中的BOX 模型解釋不一緻導緻相差2px解決方法：div{margin:30px!important;margin:28px;}

　　注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識别，但别的浏覽器可以識别。是以在IE下其實解釋成這樣：div{maring:30px;margin:28px}

　　重複定義的話按照最後一個來執行，是以不可以隻寫margin:XXpx!important;

　　31.IE5 和IE6的BOX解釋不一緻

　　IE5下div{width:300px;margin:0 10px 0 10px;}

　　div 的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他浏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改 div{width:300px!important;width :340px;margin:0 10px 0 10px}

　　轉自 http://www.ajaxa.cn/article/1080.html