IE和火狐兼整理

一、firefox不支持innerText,IE和firefox都支持innerHTML。

解決方法：在非IE瀏覽器中使用textContent代替innerText。 
示例： 
if(navigator.appName.indexOf(」Explorer」) >-1){ 
document.getElementById(」element」).innerText = 「my text」; 
}else{ 
document.getElementById(」element」).textContent = 「my text」; 
} 
[注] innerHTML 同時被ie、firefox等瀏覽器支持，其餘的，如outerHTML等只被ie支持，最好不用。

二、cursor:hand VS cursor:pointer 

問題說明：firefox不支持hand，但ie支持pointer ，二者都是手形指示。 
解決方法：統一使用pointer。

三、自定義屬性問題 

問題說明：IE下，可使用獲取常規屬性的方法來獲取自定義屬性（即obj.自定義屬性），也可使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。 
解決方法：統一經過 getAttribute() 獲取自定義屬性。

四、集合類對象問題

問題說明：IE下，可使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。 
解決方法：統一使用 [] 獲取集合類對象。

五、捕獲事件 
IE：obj.setCapture() 、obj.releaseCapture() 
Firefox：document.addEventListener(」mousemove」,mousemovefunction,true); 
document.removeEventListener(」mousemove」,mousemovefunction,true);

6.獲取鼠標位置 
IE:event.clientX、event.clientY 
firefox：須要事件函數傳遞事件對象 
obj.onmousemove=function(ev){ 
X= ev.pageX;Y=ev.pageY; 
}

七、禁止選取網頁內容 

在IE中通常用js：obj.onselectstart=function(){return false;} 
而firefox用CSS:-moz-user-select:none

八、DIV等元素的邊界問題 
好比：設置一個div的CSS:：{width:100px;height:100px;border:#000000 1px solid;} 
IE中：div的寬度（包括邊框寬度）：100px，div的高度（包括邊框寬度）：100px； 
而firefox：div的寬度（包括邊框寬度）：102px，div的高度（包括邊框寬度）：102px；

九、const問題 
問題說明：Firefox下，可使用const關鍵字或var關鍵字來定義常量；IE下，只能使用var關鍵字來定義常量。 
解決方法：統一使用var關鍵字來定義常量。

十、input.type屬性問題 

問題說明：IE下 input.type 屬性爲只讀；可是Firefox下 input.type 屬性爲讀寫。 
解決辦法：不修改 input.type 屬性。若是必需要修改，能夠先隱藏原來的input，而後在一樣的位置再插入一個新的input元素。

十一、window.event問題 
問題說明：window.event 只能在IE下運行，而不能在Firefox下運行，這是由於Firefox的event只能在事件發生的現場使用。 
解決方法：在事件發生的函數上加上event參數，在函數體內(假設形參爲evt)使用 var myEvent = evt?evt:(window.event?window.event:null) 
示例：<input type=」button」 onclick=」doSomething(event)」/> 
<script language=」javascript」> 
function doSomething(evt) { 
var myEvent = evt ? evt: (window.event ? window.event : null) 
… 
}

十二、event.x與event.y問題 
問題說明：IE下，even對象有x、y屬性，可是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，可是沒有x、y屬性。 
解決方法：var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY; 
若是考慮第8條問題，就改用myEvent代替event便可。

1三、event.srcElement、event.fromElement、event.toElement問題 
問題說明：IE下，even對象有srcElement屬性，可是沒有target屬性；Firefox下，even對象有target屬性，可是沒有srcElement屬性。 
解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target; 

              var relTarg = e.relatedTarget || e.fromElement;

               var relTarg = e.relatedTarget || e.toElement;

 

1四、window.location.href問題 
問題說明：IE或者Firefox2.0.x下，可使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。 
解決方法：使用 window.location 來代替 window.location.href。固然也能夠考慮使用 location.replace()方法。

1五、模態和非模態窗口問題 
問題說明：IE下，能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口；Firefox下則不能。 
解決方法：直接使用 window.open(pageURL,name,parameters) 方式打開新窗口。 
如 
果須要將子窗口中的參數傳遞迴父窗口，能夠在子窗口中使用window.opener來訪問父窗口。若是須要父窗口控制子窗口的話，使用var 
subWindow = window.open(pageURL,name,parameters);來得到新開的窗口對象。

1六、對象寬高賦值問題 
問題說明：FireFox中相似 obj.style.height = imgObj.height 的語句無效。 
解決方法：統一使用 obj.style.height = imgObj.height + 「px」;

1七、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); 

1八、MSXML.DOMDocument
    IE：xml = new ActiveXObject("MSXML.DOMDocument")，建立xml Dom對象
    Firefox：var domparser = new DOMParser(); xml = domparser.parseFromString(xml, "text/xml");  
    以上IE和Firefox不兼容，須要經過if (window.DOMParser)或者if (window.ActiveXObject)判斷

1九、Microsoft.XMLHTTP

    IE：xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")，建立xmlhttp對象
    Firefox：xmlhttp = new window.XMLHttpRequest()
    以上IE和Firefox不兼容，須要判斷if (window.XMLHttpRequest)或者if (window.ActiveXObject)

  20、parentElement
    IE：obj.parentElement，獲取父元素
    Firefox：obj.parentNode

2一、透明度

   IE：obj.style.filter = "alpha(opacity=50)" 或者 obj.filters.alpha.opacity=50 設置元素的透明度
    Firefox：obj.style.opacity = 0.5
    以上IE和Firefox不兼容，單位也不同，IE爲100單位，Firefox爲1單位。處理方法爲兩行同時使用

（集衆家之所長

http://blog.sina.com.cn/s/blog_646e1e0201018kcg.html
https://www.cnblogs.com/binaryworms/articles/2318865.html

）

2二、currentStyle/getComputedStyle

TypeError: this.oSelectButton.currentStyle is undefined

getComputedStyle(obj,false)：在FF新版本中只須要第一個參數，即操做對象，第二個參數寫「false」也是你們通用的寫法，目的是爲了兼容老版本的火狐瀏覽器。

兼容寫法：

var oAbc = document.getElementById("abc");if(oAbc.currentStyle) {     //IE、Opera     alert(oAbc.currentStyle.width);} else {    //FF、chrome、safari    alert(getComputedStyle(oAbc,false).width);}