JAVASCRIPT IE 與 FF 中相容寫法記錄_經驗交流

png透明 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

enabled：可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。true：預設值。濾鏡啟用。false：濾鏡被禁止。
sizingMethod：可選項。字串(String)。設定或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。crop：剪下圖片以適應對象尺寸。image：預設值。增大或減小對象的尺寸邊界以適應圖片的尺寸。scale：縮放圖片以適應對象的尺寸邊界。
src：必選項。字串(String)。使用絕對或相對 url 地址指定背景映像。假如忽略此參數，濾鏡將不會作用。

firefox不能對innerText支援
firefox支援innerHTML但卻不支援innerText，它支援textContent來實現innerText，不過預設把多餘的空格也保留了。如果不用textContent，如果字串裡面不包含HTML代碼也可以用innerHTML代替。

禁止選取網頁內容
在IE中一般用js：obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none

濾鏡的支援(例：透明濾鏡)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;

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

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

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

判斷瀏覽器類型
var isIE=document.all ? true : false;
我寫了一個變數，如果支援document.all文法那麼isIE=true，否則isIE=false

在不同瀏覽器下的CSS處理
一般可以用!important來優先使用css語句（僅firefox支援）
比如：{border-width:0px!important;border-width:1px;}
在firefox下這個元素是沒有邊框的，在IE下邊框寬度是1px

document.formName.item(”itemName”) 問題
問題說明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。
解決方案：統一使用document.formName.elements["elementName"]。

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

自訂屬性問題
問題說明：IE下，可以使用擷取常規屬性的方法來擷取自訂屬性，也可以使用 getAttribute() 擷取自訂屬性；Firefox下，只能使用 getAttribute() 擷取自訂屬性。
解決方案：統一通過 getAttribute() 擷取自訂屬性。

eval(”idName”)問題
問題說明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 來取得 id 為 idName 的HTML對象；Firefox下，只能使用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。
解決方案：統一用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。

變數名與某HTML對象ID相同的問題
問題說明：IE下，HTML對象的ID可以作為 document 的下屬物件變數名直接使用，Firefox下則不能；Firefox下，可以使用與HTML對象ID相同的變數名，IE下則不能。
解決方案：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對象ID相同的變數名，以減少錯誤；在聲明變數時，一律加上var關鍵字，以避免歧義。

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)
樣本：