我們在網頁設計中通常都會遇到firefox和IE不兼容的情況，很多時候就是內容在IE中能顯示正常，firefox里樣式就變了?，F在做網站都要考慮到網站在FIREFOX和IE這兩種瀏覽器里面都能正常運行,有一些網站在IE里面運行正常,在FIREFOX里面就不一定了,主要是因為大家在排版的時候都以IE瀏覽器為基準,而FIREFOX則是要大家在排版都時候不能少寫表格的寬度\高度。今天就來講解一下在網頁設計過程中遇到firefox和IE不兼容的情況該如何處理。

因為firefox顯示圖片方式不一樣，所以建議使用div+css，在css里面每個塊都要寫好margin和padding，這樣位置就不容易亂，火狐默認是左對齊，IE默認是居中，所以在css里一定要定義好。

接下來總結一些IE和Firefox(火狐)在JavaScript方面的不兼容及統一方法。

1、集合類對象。IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象。解決方法:統一使用[]獲取集合類對象。

2、eval("idName")問題。IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象;Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象。解決方法:統一用getElementById("idName")來取得id為idName的HTML對象。

3、const問題。Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量。解決方法:統一使用var關鍵字來定義常量。

4、兼容firefox的 outerHTML，FF中沒有outerHtml的方法。

5、自定義屬性問題。IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。

6、變量名與某HTML對象ID相同的問題。IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對象ID相同的變量名;IE下則不能。解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義。

7、window.event問題。window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用。

8、event.srcElement問題。IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性。解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target。

9、window.location.href問題。IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。解決方法:使用window.location來代替window.location.href。

10、input.type屬性問題。說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫。

11、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。

12、body問題。Firefox的body在body標簽沒有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標簽被瀏覽器完全讀入之后才存在。

13、firefox與IE(parentElement)的父元素的區別。IE：obj.parentElement；firefox：obj.parentNode；解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇。

14、cursor:hand VS cursor:pointer。firefox不支持hand，但IE支持pointer。解決方法: 統一使用pointer。

15、FireFox中類似 obj.style.height = imgObj.height 的語句無效。解決方法： obj.style.height = imgObj.height + ''px''。

16、模態和非模態窗口問題。IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能。解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口，如果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如：var parWin = window.opener;parWin.document.getElementById("Aqing").value = "Aqing"。

17、事件委托方法。IE：document.body.onload = inject; //Function inject()在這之前已被實現；Firefox：document.body.onload = inject();有人說標準是：document.body.onload=new Function(''inject()'')。

18、frame問題。以下面的frame為例：

(1)訪問frame對象:IE:使用window.frameId或者window.frameName來訪問這個frame對象. 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中的參數傳回父窗口，可以在frme中使用parent來訪問父窗口。例如：parent.document.form1.filename.value="Aqing";

19、innerText在IE中能正常工作，但是innerText在FireFox中卻不行。

20、消除ul、ol等列表的縮進時。樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效。

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、CSS透明。IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。

23、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;。

24、padding 問題。padding 5px 4px 3px 1px FireFox無法解釋簡寫,必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。

25、IE,firefox以及其它瀏覽器對于 table 標簽的操作都各不相同，在ie中不允許對table和tr的innerHTML賦值，使用js增加一個tr時，使用appendChile方法也不管用。