IE與FireFox的js和css幾處不同點

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.οnmοusemοve=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" οnclick="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.οnlοad=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.οnmοuseοver=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.οnclick=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裏不適用。

發佈了33 篇原創文章 · 獲贊 0 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章