1. 程式人生 > >IE和FIREFOX在解析JS方面的區別

IE和FIREFOX在解析JS方面的區別

1. 物件問題
1.1 Form物件
現有問題:
現有程式碼這獲得form物件通過forms("formName"),這樣使用在IE 能接受,MF 不能。
解決方法:
改用 作為下標運算。改為forms["formName"]
備註
上述的改用 作為下標運算中的formName是id而name

1.2 HTML物件
現有問題:
在 IE 中,HTML 物件的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能。
all("itemName")或者all("itemId")
解決方法:
使用物件ID作為物件變數名
getElementById("itemId")
備註
all是IE自定義的方法,所以請大家儘量不使用。
還有一種方式,在IE和MF都可以使用
var f = forms["formName "];
var o = f. itemId;

1.3 DIV物件
現有問題:
在 IE 中,DIV物件可以使用ID作為物件變數名直接使用。在 MF 中不能。
DivId.style.display = "none"
解決方法:
getElementById("DivId").style.display = "none"
備註
獲得物件的方法不管是不是DIV物件,都使用getElementById方法。

1.4 IE和firefox都是支援onscroll(當元素滾動條被滾動時執行指令碼)事件的,  
但是firefox中textarea對此事件不支援。

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

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

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

2. 總結
2.1 在JS中定義各種物件變數名時,儘量使用id,避免使用name。
在 IE 中,HTML 物件的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能,所以在平常使用時請儘量使用id,避免只使用name,而不使用id。

2.2 變數名與某 HTML 物件 id 相同的問題
現有問題
在 MF 中,因為物件 id 不作為 HTML 物件的名稱,所以可以使用與 HTML 物件 id 相同的變數名,IE 中不能。
解決方法
在宣告變數時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常執行。
此外,最好不要取與 HTML 物件 id 相同的變數名,以減少錯誤。


1. all
 
 Firefox可以相容all, 但會生成一條警告。可以用getElementById("*") 或者 getElementByTagName("*)來代替
 
 不過對於all.length等屬性,則完全不相容。
2. parentElement
 
 這個也不相容。比方說, obj.parentElement.name 則應改成 obj.parentNode.attributes.getNamedItem("name").node(不知道如何寫得更簡潔些)
3. event
 
 W3C不支援windows.event
 
 比方說:
 
   在IE裡面
 
         <div class="menu" id="menu" ="onMenuClick(); ">.....</div>
 
      onMenuClick()
 
     {
 
       collapseMenu(event.srcElement);
 
     }
 
   工作正常。不過在Firefox中,則改成:

       <div class="menu" id="menu" ="onMenuClick(event); ">
 
        onMenuClick(evt)
 
     {
 
       if(evt == null)
 
             evt = event; // For IE
 
         var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target
 
       collapseMenu(srcElement);
}


IE和FIREFOX在解析CSS方面的區別
-----------------------------------------------------------------

1.對高度的解析

IE:將根據內容的高度變化,包括未定義高度的圖片內容,即使定義了高度,當內容超過高度時,將使用實際高度

Firefox:沒有定義高度時,如果內容中包括了圖片內容,MF的高度解析是根據印刷標準,這樣就會造成和實際內容高度不符合的情況;

當定義了高度,但是內容超過高度時,內容會超出定義的高度,但是區域使用的樣式不會變化,造成樣式錯位。

解決方案:css中定義display:table; 可以自適應

2.寬度的區別

IE:內容寬度=您定義的容器寬度(Internet Explorer ’width’)-padding寬度-border寬度。

IE中定義 width:100px;padding:5px 的話,所顯示的寬度就是100px。

FF:容器佔的寬度=內容寬度+padding寬度+border寬度。

Firefox中定義 width:100px;padding:5px 的話,所顯示的寬度就是105px。

建議:使用 !important;但是,!important一定要在前面。

如:width:95px !important;width:100px;padding:5px;。

解決:

可以使用在CSS樣式中定義 margin:0px auto;
 
  *margin:0px auto;
 
  _margin:0px auto;

以此類推:其他的屬性也是可以這樣使用的.


3.浮動(float)的區別

(1)空格處理

IE:對於DIV並排時候使用float關鍵字時候,IE對塊與塊之間的空格是處理的。

FF:對於DIV並排時候使用float關鍵字時候,Firefox對塊與塊之間的空格是不處理的。

建議:經常發現使用float關鍵字時候在Firefox顯示正常,但是在IE中會出現空格,就是這個原因;

避免在div連div時候新增空格或者回車,也即是一個div緊接這一個div寫;

或者,將div放入li中進行處理,這樣就不會有空格的問題。

(2)Margin加倍

IE:在使用float的情況下,IE的margin加倍。

FF:正常顯示。

建議:針對IE,新增display:inline;


相應的css為

#float{

float:left;

margin:5px;

display:inline;

}

4.滑鼠位置處理

IE:獲取事件滑鼠位置時,IE用的是event.x和event.y,並且值在不加單位的情況下可以直接使用,IE提供預設單位;

div.style.left = event.x

div.style.top = event.y

此時,div顯示的位置為滑鼠的位置。

FF:獲取事件滑鼠位置時,Firefox用的是MouseEvent.pageX和MouseEvent.pageY,並且在不加單位的情況下直接賦值 後,無效;必須新增單位。

div.style.left = MouseEvent.pageX

div.style.top = MouseEvent.pageY

此時,div顯示的位置為0,0.

建議:都新增單位,無論針對IE或者Firefox都有效。

IE:div.style.left = event.x+'px'

div.style.top = event.y+'px'

FF:div.style.left = MouseEvent.pageX+'px'

div.style.top = MouseEvent.pageY+'px'

4.img物件alt和title的解析

alt:當照片不存在或者load錯誤時的提示;

title:照片的tip說明。

在IE中如果沒有定義title,alt也可以作為img的tip使用,但是在MF中,兩者完全按照標準中的定義使用

結論:大家在定義img物件時,最後將alt和title物件都寫全,保證在各種瀏覽器中都能正常使用


大家看一下這個img標籤。<img 
 onerror = "this.src='xxx.jpg'"  title=''
alt="諾基亞(NOKIA)5320 GSM手機(藍色)200萬畫素 支援8G儲存卡 卓越的XpressMusic音樂體驗"
src="xxx.jpg" name="qq"/> 
 
再src請求不到的時候觸發onerror


5.IE6中的select有永遠處在最上的bug,而且css對select不起作用。
解決辦法就是在浮動層的下面,加個透明的IFRAME,程式碼如下:

      <div style="position:absolute;z-index:-1;left:-8px;top:0;width:232px;">
 
       <iframe style="width:100%;filter:alpha(opacity=0);-moz-opacity:0"></iframe>
 
      </div>
類似於剛剛好把<select>的展現資訊擋住(只是覺得是個辦法。所以貼出來)

在form中,IE支援label,包括文字和圖片;但是firefox不支援圖片的label,
點選圖片不能讓label for的radio或者checkbox產生效果。

(label 向控制元件定義標註(標記)。如果您在 label 元素內點選文字,就會觸發此控制元件。
就是說,當用戶選擇該標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上)
eg:標記通常以下面兩種方式中的一種來和表單控制元件相聯絡:將表單控制元件作為標記標籤的內容,這樣的就是隱式形式,
或者為 <label> 標籤下的 for 屬性命名一個目標表單 id,這樣就是顯式形式。

例如,在 XHTML 中:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
<label>Date of Birth: <input type="text" name="DofB" /></label>
第一個標記是以顯式形式將文字 "Social Security Number:" 和表單的社會安全號碼的文字輸入控制元件 ("SocSecNum") 聯絡起來,
它的 for 屬性的值和控制元件的 id 一樣,都是 SSN。第二個標記 ("Date of Birth:") 不需要 for 屬性,
它的相關控制元件也不需要 id 屬性,它們是通過在 <label> 標籤中放入 <input> 標籤來隱式地連線起來的。


6.CSS方面,IE中支援在CSS中嵌入expresion,而Firefox不支援
firefox支擇相鄰子選擇符“>”,而IE6不支援(IE7支援)

7.firefox 對display的inline-block不支援,而IE均支援。

8.cusor:hand:豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。
pointer:(IE6.0)和hand 一樣。豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。
可是 pointer 才是css2 的標準屬性,壓根就沒有hand 這個東西。

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

另外在模版的JS設計的時候也需要考慮兩者對程式碼的相容,以下是對IE與FIREFOX中JS的一些測試:

以下以 IE 代替 Internet Explorer,以 MF 代替 Mozilla Firefox

1. form.item 問題
 
   (1)現有問題:
 
       現有程式碼中存在許多 formName.item("itemName") 這樣的語句,不能
 
       在 MF 下執行
 
   (2)解決方法:
 
       改用 formName.elements["elementName"]
 
   (3)其它
 
       參見 2

2. 集合類物件問題
 
   (1)現有問題:
 
       現有程式碼中許多集合類物件取用時使用 (),IE 能接受,MF 不能。
 
   (2)解決方法:
 
       改用 [] 作為下標運算。如:forms("formName") 改為
 
       forms["formName"]。
 
       又如:getElementsByName("inputName")(1) 改為
 
       getElementsByName("inputName")[1]
 
   (3)其它

3. event
 
   (1)現有問題:
 
       使用 event 無法在 MF 上執行
 
   (2)解決方法:
 
       MF 的 event 只能在事件發生的現場使用,此問題暫無法解決。可以這樣變通:
 
       原始碼(可在IE中執行):
 
           <input type="button" name="someButton" ="提交"
 
                    ="java:gotoSubmit()"/>
 
           ...
 
           < language="java">
 
               gotoSubmit() {
 
                   ...
 
                   alert(event);    // use event
 
                   ...
 
               }
 
           </>

       新程式碼(可在IE和MF中執行):
 
           <input type="button" name="someButton" ="提交"
 
                   ="java:gotoSubmit(event)"/>
 
           ...
 
           < language="java">
 
               gotoSubmit(evt) {
 
                   evt = evt ? evt : (event ? event : null);
 
                   ...
 
                   alert(evt);             // use evt
 
                   ...
 
               }
 
           </>
 
       此外,如果新程式碼中第一行不改,與老程式碼一樣的話(即 gotoSubmit 呼叫沒有給
 
       引數),則仍然只能在IE中執行,但不會出錯。所以,這種方案 tpl 部分仍與老
 
             //事件處理函式
 
            a(evt) { //FireFox
 
           evt = evt? evt: event; //IE
 
           var srcElem = (evt.target)? evt.target: evt.srcElement;
 
           //事件處理...
 
           }

在連線事件處理函式的時候,可以用Inline HTML方式,也可以用Event
 
           property方式定義。
 
                         1、使用Inline HTML方式,如:
 
               <input type="radio" name="radio" ="1"
 
                   ="java:a(event)">
 
                                注意:
 
                   (1)java不能省;
 
                   (2)實參要使用event,形參使用什麼都可以(如evt、event等);
 
                            2、使用Event property方式繫結事件處理函式,如:
 
                   form2.radio[0]. = a;

6. 變數名與某 HTML 物件 id 相同的問題
 
   (1)現有問題
 
       在 MF 中,因為物件 id 不作為 HTML 物件的名稱,所以可以使用與 HTML 物件
 
       id 相同的變數名,IE 中不能。
 
   (2)解決方法
 
       在宣告變數時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常執行。
 
       此外,最好不要取與 HTML 物件 id 相同的變數名,以減少錯誤。
 
   (3)其它
 
       參見 問題4

7. event.x 與 event.y 問題
 
   (1)現有問題
 
       在IE 中,event 物件有 x, y 屬性,MF中沒有。
 
   (2)解決方法
 
       在MF中,與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
 
       故採用 event.clientX 代替 event.x。在IE 中也有這個變數。
 
       event.clientX 與 event.pageX 有微妙的差別(當整個頁面有滾動條的時候),
 
       不過大多數時候是等效的。

       如果要完全一樣,可以稍麻煩些:
 
       mX = event.x ? event.x : event.pageX;
 
       然後用 mX 代替 event.x
 
   (3)其它
 
       event.layerX 在 IE 與 MF 中都有,具體意義有無差別尚未試驗。


8. 關於
 
  (1)現有問題
 
        在 IE中 可以用test取得該,mf中不行
 
  (2)解決方法
 
        在的使用方面mf和ie的最主要的區別是:
 
        如果在標籤中書寫了以下屬性:
 
        < src="/xx.htm" id="Id" name="Name" />
 
        那麼ie可以通過id或者name訪問這個對應的window物件
 
        而mf只可以通過name來訪問這個對應的window物件
 
        例如如果上述標籤寫在最上層的window裡面的htm裡面,那麼可以這樣訪問
 
        ie: top.Id或者top.Name來訪問這個window物件
 
        mf: 只能這樣top.Name來訪問這個window物件

        另外,在mf和ie中都可以使用
 
            top.getElementById("Id")
 
        來訪問
 
        標籤
 
        並且可以通過
 
            top.getElementById("test").src = 'xx.htm'
 
        來切換的內容
 
        也都可以通過top.Name.location = 'xx.htm'來切換的內容
 
        關於和window的描述可以參見bbs的‘window與’文章
 
        以及/test/js/test_/目錄下面的測試
 
        ----adun 2004.12.09修改

9. 在mf中,自己定義的屬性必須getAttribute()取得

10.在mf中沒有  parentElement parement.children  而用
 
              parentNode parentNode.childNodes
 
  childNodes的下標的含義在IE和MF中不同,MF使用DOM規範,childNodes中會插入空白
 
  文字節點。
 
 一般可以通過node.getElementsByTagName_r()來回避這個問題。
 
  當html中節點缺失時,IE和MF對parentNode的解釋不同,例如
 
  <form>
 
  <table>
 
       <input/>
 
  </table>
 
  </form>
 
  MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節點

  MF中節點沒有removeNode方法,必須使用如下方法
 
  node.parentNode.removeChild(node)

11.const 問題
 
 (1)現有問題:
 
    在 IE 中不能使用 const 關鍵字。如 const constVar = 32;
 
    在IE中這是語法錯誤。
 
 (2)解決方法:
 
    不使用 const ,以 var 代替。

12. body 物件
 
  MF的body在body標籤沒有被瀏覽器完全讀入之前就存在,而IE則必須在body完全被讀入
 
  之後才存在

13. url encoding
 
   在js中如果書寫url就直接寫&不要寫&例如
 
       var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
 
   frm.action = url那麼很有可能url不會被正常顯示以至於引數沒有正確的傳到伺服器
 
   一般會伺服器報錯引數沒有找到
 
   當然如果是在tpl中例外,因為tpl中符合xml規範,要求&書寫為&
 
   一般MF無法識別js中的&


14. nodeName 和 tagName 問題
 
 (1)現有問題:
 
    在MF中,所有節點均有 nodeName 值,但 textNode 沒有 tagName 值。在 IE 中,
 
    nodeName 的使用好象
 
    有問題(具體情況沒有測試,但我的IE已經死了好幾次)。
 
 (2)解決方法:
 
    使用 tagName,但應檢測其是否為空。

15. 元素屬性
 
  IE下 input.type屬性為只讀,但是MF下可以修改


16. getElementsByName() 和 all[name] 的問題
 
 (1)現有問題:
 
    在 IE 中,getElementsByName()、all[name] 均不能用來取得 div 元素
 
    (是否還有其它不能取的元素還不知道)。