[轉載]IE與FireFox的js和css幾處不同點

轉自：http://blog.csdn.net/mengyao/archive/2008/05/22/2468068.aspx
方便自己查閱

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

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

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

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

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

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

所以在做這個相容IE和firefox的拖動視窗時，在js和css的寫法上要動點腦筋，給大家兩個小技巧

一.判斷瀏覽器類型：
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

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

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

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

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

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

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

　　7.input.type屬性問題
　　問題說明：IE下 input.type 屬性為唯讀；但是Firefox下 input.type 屬性為讀寫。
       解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然後在同樣的位置再插入一個新的input元素。

　　8.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)
　　...
　　}

       9.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即可。
       通用：兩者都有event.clientX和event.clientY屬性。

　　10.event.srcElement問題
　　問題說明：IE下，even對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。
　　解決方案：使用srcObj = event.srcElement ? event.srcElement : event.target;
       如果考慮第8條問題，就改用myEvent代替event即可。

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

　　12.模態和非模態視窗問題
　　問題說明：IE下，可以通過showModalDialog和showModelessDialog開啟模態和非模態視窗；Firefox下則不能。
　　解決方案：直接使用 window.open(pageURL,name,parameters) 方式開啟新視窗。
       如果需要將子視窗中的參數傳遞迴父視窗，可以在子視窗中使用window.opener來訪問父視窗。如果需要父視窗控制子視窗的話，使用var subWindow = window.open(pageURL,name,parameters); 來獲得新開的視窗對象。

　　13.frame和iframe問題
　　以下面的frame為例：
　　<frame src="xxx.html" id="frameId" name="frameName" />
　　(1)訪問frame對象
　　IE：使用window.frameId或者window.frameName來訪問這個frame對象；
　　Firefox：使用window.frameName來訪問這個frame對象；
       解決方案：統一使用 window.document.getElementById("frameId") 來訪問這個frame對象；

　　(2)切換frame內容
　　在IE和Firefox中都可以使用window.document.getElementById("frameId").src="xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容；
　　如果需要將frame中的參數傳回父視窗，可以在frame中使用parent關鍵字來訪問父視窗。

　　14.body載入問題
　　問題說明：Firefox的body對象在body標籤沒有被瀏覽器完全讀入之前就存在；而IE的body對象則必須在body標籤被瀏覽器完全讀入之後才存在。
       [注] 這個問題尚未實際驗證，待驗證後再來修改。
       [注] 經驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS指令碼可以訪問在指令碼之前已經載入的所有對象和元素，即使這個元素還沒有載入完成。

　　15. 事件委託方法
　　問題說明：IE下，使用 document.body.onload = inject; 其中function inject()在這之前已被實現；在Firefox下，使用 document.body.onload = inject();
　　解決方案：統一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 這裡是代碼 */}
       [注意] Function和function的區別

　　16.訪問的父元素的區別
　　問題說明：在IE下，使用 obj.parentElement 或 obj.parentNode 訪問obj的父結點；在firefox下，使用 obj.parentNode 訪問obj的父結點。
　　解決方案：因為firefox與IE都支援DOM，因此統一使用obj.parentNode 來訪問obj的父結點。

　　17.cursor:hand VS cursor:pointer
　　問題說明：firefox不支援hand，但ie支援pointer ，兩者都是手形指示。
　　解決方案：統一使用pointer。

　　18.innerText的問題.
       問題說明：innerText在IE中能正常工作，但是innerText在FireFox中卻不行。
       解決方案：在非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支援，最好不用。

　　19. 對象寬高賦值問題
　　問題說明：FireFox中類似 obj.style.height = imgObj.height 的語句無效。
       解決方案：統一使用 obj.style.height = imgObj.height + 'px';

　　20. 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。

　　21. ul和ol列表縮排問題
　　消除ul、ol等列表的縮排時，樣式應寫成：list-style:none;margin:0px;padding:0px;
　　其中margin屬性對IE有效，padding屬性對FireFox有效。← 此句表述有誤，詳細見↓
       [注] 這個問題尚未實際驗證，待驗證後再來修改。
       [注] 經驗證，在IE中，設定margin:0px可以去除列表的上下左右縮排、空白以及列表編號或圓點，設定padding對樣式沒有影響；在Firefox中，設定margin:0px僅僅可以去除上下的空白，設定padding:0px後僅僅可以去掉左右縮排，還必須設定list-style:none才能去除列表編號或圓點。也就是說，在IE中僅僅設定margin:0px即可達到最終效果，而在Firefox中必須同時設定margin:0px、padding:0px以及list-style:none三項才能達到最終效果。

　　22. CSS透明問題
　　IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
　　FF：opacity:0.6。
       [注] 最好兩個都寫，並將opacity屬性放在下面。

　　23. CSS圓角問題
　　IE：ie7以下版本不支援圓角。
　　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;。
       [注] 圓角問題是CSS中的經典問題，建議使用JQuery框架組來設定圓角，讓這些複雜的問題留給別人去想吧。

　　關於CSS中的問題實在太多了，甚至同樣的CSS定義在不同的頁面標準中的顯示效果都是不一樣的。一個合乎發展的建議是，頁面採用標準DHTML標準編寫，較少使用table，CSS定義盡量依照標準DOM，同時兼顧IE、Firefox、Opera等主流瀏覽器。BTW，很多情況下，FF和Opera的CSS解釋標準更貼近CSS標準，也更具有規範性。

常用的js在ie和firefox相容寫法 1.擷取控制項用document.getElementById，不用document.all（FF等瀏覽器不支援）
2.<button> 會被firefox解釋為提交form或者重新整理頁面,需要寫標準<button type="button">
3.使用childNode()代替之前的children 
4. 手型滑鼠指標請用cursor:pointer，不用 cursor:hand
5.擷取自己定義的屬性 用  document.getElementByID("TD1").getAttribute("isOBJ")  代替document.getElementByID("TD1").isOBJ
6.事件追加方法attachEvent(IE)/detachEvent;addEventListener( Mozilla, Netscape, Firefox)/removeEventListener
  又或者直接用obj.onmouseover=func;
7.Firefox中不存在 Event時間,必須通過object本身去取
   在Firefox擷取當前物件的座標方法：
  document.onmousemove = Inti_move;
  function  Inti_move(ert)
{
  x=ert.pageX;
}

表4 Mozilla與IE之間的事件屬性差異

Internet Explorer Name	Mozilla Name	Description
altKey	altKey	Boolean property that returns whether the alt key was pressed during the event.
cancelBubble	stopPropagation()	Used to stop the event from bubbling farther up the tree.
clientX	clientX	The X coordinate of the event, in relation to the element viewport.
clientY	clientY	The Y coordinate of the event, in relation to the element viewport.
ctrlKey	ctrlKey	Boolean property that returns whether the Ctrl key was pressed during the event.
fromElement	relatedTarget	For mouse events, this is the element from which the mouse moved away.
keyCode	keyCode	For keyboard events, this is a number representing the key that was pressed. It is 0 for mouse events.
returnValue	preventDefault()	Used to prevent the event's default action from occurring.
screenX	screenX	The X coordinate of the event, in relation to the screen.
screenY	screenY	The Y coordinate of the event, in relation to the screen.
shiftKey	shiftKey	Boolean property that returns whether the Shift key was pressed during the event.
srcElement	target	The element to which the event was originally dispatched.
toElement	currentTarget	For mouse events, this is the element to which the mouse moved.
type	type	Returns the name of the event.

8>event.keyCode的問題解決
在FF中不存在window.event.keyCode屬性。可以用以下方法解決

function keepKeyNum(evt)
{
        var  k=window.event?evt.keyCode:evt.which;
        if ((k<=57) && (k>=48))
                {return true;}
        else 
                {return false;}
} !input type="text" onKeyPress=" return keepKeyNum(event);" >

滑鼠當前座標(加上捲軸滾過的距離)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
標籤的x和y的座標位置：style.posLeft 和 style.posTop
IE：有。
FF：沒有。
通用：object.offsetLeft 和 object.offsetTop。

表單的高度和寬度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此時頁面一定要有body標籤。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。

添加事件
IE：element.attachEvent(”onclick”, func);。
FF：element.addEventListener(”click”, func, true)。
通用：element.onclick=func。雖然都可以使用onclick事件，但是onclick和上面兩種方法的效果是不一樣的， onclick只有執行一個過程，而attachEvent和addEventListener執行的是一個過程列表，也就是多個過程。例如： element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)這樣func1和func2都會被執行。

標籤的自訂屬性
IE：如果給標籤div1定義了一個屬性value，可以div1.value和div1[”value”]取得該值。
FF：不能用div1.value和div1[”value”]取。
通用：div1.getAttribute(”value”)。

父節點、子節點和刪除節點
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

FF和IE下的js相容性問題（轉）

做了幾周的js相容性,多少總結了幾條經驗,下面把ff下常用的替代寫法和區別列舉出來,大家共用。
1,document.getElementById替代document.all（ie適用）
2,集合[]替代()（ie適用）
3,target替代srcElement;parentNode替代parentElement（parentNode ie適用）
4,node.parentNode.removeChild(node)替代removeNode(this)（ie適用）
5,有空白文本節點（FF下會將空白文本解析為一個節點）
6,無outerHTML 屬性
7,事件局部變數e替代事件全域變數event
8,e.button索引值有別於event.button,只有3個索引值而無按鍵組合值
9,無ondrag事件
10,DOMMouseScroll替代onmousewheel;-e.detail替代event.wheelDelta
11,addEventListener替代attachEvent;removeEventListener替代detachEvent
12,e.preventDefault()替代event.returnValue=false;e.stopPropagation()替代event.cancelBubble=true
13,style.top、style.left等嚴格檢查"px"單位（加"px" ie適用）
14,style="-moz-opacity:0.9"替代style="filter:alpha(opacity=90)";無其它filter
15,style.cursor="pointer"替代style.cursor="hand"（ie適用）
16,title替代alt（ie適用）
17,狀態列預設不可修改,需調整ff設定
18,內建繪圖功能以canvas或者SVG替代vml
19,代碼出錯時經常不報錯（想來也是ff的無奈之舉吧,如果每個ie專屬的表達方式換在它裡面都報錯的話,怕是報都報不過來吧）
20,對緩衝的清理非常不好
注:標明“ie適用”者為通用性建議寫法,未標明者在ie裡不適用。