1.HTML物件獲取問題

FireFox：document.getElementById(“idName”);

ie:document.idname或者document.getElementById(“idName”).

解決辦法：統一使用document.getElementById(“idName”);

2.const問題

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

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

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

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  src=”xxx.html”  id=”frameId”  name=”frameName”  />

(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”;

6.模態和非模態視窗問題

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

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

如果需要將子視窗中的引數傳遞迴父視窗,可以在子視窗中使用window.opener來訪問父視窗.

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

7.firefox與IE的父元素(parentElement)的區別

IE：obj.parentElement

firefox：obj.parentNode

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

8.document.formName.item(”itemName”) 問題

問題說明：IE下，可以使用document.formName.item(”itemName”) 或document.formName.elements [“elementName”]；Firefox 下，只能使用document.formName.elements[“elementName”]。

解決方法：統一使用document.formName.elements[“elementName”]。

9.集合類物件問題

問題說明：IE下，可以使用 () 或 [] 獲取集合類物件；Firefox下，只能使用 [ ]獲取集合類物件。

解決方法：統一使用 [] 獲取集合類物件。

10.自定義屬性問題

問題說明：IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute() 獲取自定義屬性；Firefox下，只能使用getAttribute() 獲取自定義屬性。

解決方法：統一通過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標籤被瀏覽器完全讀入之後才存在。

[注] 這個問題尚未實際驗證，待驗證後再來修改。

[注] 經驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS指令碼可以訪問在指令碼之前已經載入的所有物件和元素，即使這個元素還沒有載入完成。

14.事件委託方法

問題說明：IE下，使用document.body.onload = inject; 其中function inject()在這之前已被實現；在Firefox下，使用document.body.onload = inject();

解決方法：統一使用document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 這裡是程式碼 */}

[注意] Function和function的區別。

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的語句無效。

Ø CSS

1.cursor:hand   VS   cursor:pointer

firefox不支援hand，但ie支援pointer

解決方法:   統一使用pointer

2.innerText在IE中能正常工作，但在FireFox中卻不行.

需用textContent。

解決方法:

?

1 2 3 4 5 6

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和IEBOX模型解釋不一致導致相差2px

box.style{width:100;border 1px;} 

ie理解為box.width = 100 

ff理解為box.width = 100 + 1*2 = 102  //加上邊框2px 

解決方法：div{margin:30px!important;margin:28px;}

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

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

6.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}

7.ul和ol列表縮排問題

消除ul、ol等列表的縮排時，樣式應寫成：list-style:none;margin:0px;padding:0px;

經驗證，在IE中，設定margin:0px可以去除列表的上下左右縮排、空白以及列表編號或圓點，設定padding對樣式沒有影響；在 Firefox 中，設定margin:0px僅僅可以去除上下的空白，設定padding:0px後僅僅可以去掉左右縮排，還必須設定list- style:none才能去除列表編號或圓點。也就是說，在IE中僅僅設定margin:0px即可達到最終效果，而在Firefox中必須同時設定margin:0px、 padding:0px以及list-style:none三項才能達到最終效果。

8.元素水平居中問題

FF: margin:0 auto;

IE: 父級{ text-align:center; }

9.Div的垂直居中問題

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

10.margin加倍的問題

設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline; 

例如：

<div id=”imfloat”>

相應的css為 

?

1 2 3 4

#imfloat{ float:left; margin:5px; /*IE下理解為10px*/ display:inline; /*IE下再理解為5px*/ }

11.IE與寬度和高度的問題

 IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。

比如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：