JS的IE和Firefox兼容性

如下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox
0、px的問題
obj.style.left = 」100px」;
obj.style.top = 」100px」;
千萬要記得寫上px，不然在Firefox上面兩句無效！！

1. document.form.item 問題
(1)現有問題：
現有代碼中存在許多 document.formName.item(」itemName」) 這樣的語句，不能在 MF 下運行
(2)解決方法：
改用 document.formName.elements[」elementName」]
(3)其它
參見 2

2. 集合類對象問題
(1)現有問題：
現有代碼中許多集合類對象取用時使用 ()，IE 能接受，MF 不能。
(2)解決方法：
改用 [] 做爲下標運算。如：document.forms(」formName」) 改成 document.forms[」formName」]。
又如：document.getElementsByName(」inputName」)(1) 改成 document.getElementsByName(」inputName」)[1]
(3)其它

3. window.event
(1)現有問題：
使用 window.event 沒法在 MF 上運行
(2)解決方法：
MF 的 event 只能在事件發生的現場使用，此問題暫沒法解決。能夠這樣變通：
原代碼(可在IE中運行)：
<input type=」button」 name=」someButton」 value=」提交」 onclick=」javascript:gotoSubmit()」/>
…
<script language=」javascript」>
function gotoSubmit() {
…
alert(window.event);     // use window.event
…
}
</script>
新代碼(可在IE和MF中運行)：
<input type=」button」 name=」someButton」 value=」提交」 onclick=」javascript:gotoSubmit(event)」/>
…
<script language=」javascript」>
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
…
alert(evt);              // use evt
…
}
</script>
此外，若是新代碼中第一行不改，與老代碼同樣的話(即 gotoSubmit 調用沒有給參數)，則仍然只能在IE中運行，但不會出錯。因此，這種方案 tpl 部分仍與老代碼兼容。

4. HTML 對象的 id 做爲對象名的問題
(1)現有問題
在 IE 中，HTML 對象的 ID 能夠做爲 document 的下屬對象變量名直接使用。在 MF 中不能。
(2)解決方法
用 getElementById(」idName」) 代替 idName 做爲對象變量使用。

5. 用idName字符串取得對象的問題
(1)現有問題
在IE中，利用 eval(idName) 能夠取得 id 爲 idName 的 HTML 對象，在MF 中不能。
(2)解決方法
用 getElementById(idName) 代替 eval(idName)。

6. 變量名與某 HTML 對象 id 相同的問題
(1)現有問題
在 MF 中，由於對象 id 不做爲 HTML 對象的名稱，因此可使用與 HTML 對象 id 相同的變量名，IE 中不能。
(2)解決方法
在聲明變量時，一概加上 var ，以免歧義，這樣在 IE 中亦可正常運行。
此外，最好不要取與 HTML 對象 id 相同的變量名，以減小錯誤。
(3)其它
參見 問題4

7. event.x 與 event.y 問題
鼠標當前座標
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：二者都有event.clientX和event.clientY屬性。
(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 中都有，具體意義有無差異還沒有試驗。

八、鼠標當前座標(加上滾動條滾過的距離)

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」)。

1三、父節點、子節點和刪除節點

IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

1四、畫圖

IE：VML。
FF：SVG。

1五、CSS：透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

1六、CSS：圓角

IE：不支持圓角。
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;。

1七、CSS：雙線凹凸邊框

IE：border:2px outset;。
FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。

1八、關於frame
現有問題
在 IE中 能夠用window.testFrame取得該frame，mf中不行
解決方法
在frame的使用方面MF和IE的最主要的區別是：
若是在frame標籤中書寫了如下屬性：

那麼IE能夠經過id或者name訪問這個frame對應的window對象
而mf只能夠經過name來訪問這個frame對應的window對象
例如若是上述frame標籤寫在最上層的window裏面的htm裏面，那麼能夠這樣訪問
IE： window.top.frameId或者window.top.frameName來訪問這個window對象
MF：只能這樣window.top.frameName來訪問這個window對象
另外，在mf和ie中均可以使用window.top.document.getElementById(」frameId」)來訪問frame標籤
而且能夠經過window.top.document.getElementById(」testFrame」).src = ’xx.htm’來切換frame的內容
也均可以經過window.top.frameName.location = ’xx.htm’來切換frame的內容

1九、窗口
現有問題
IE中能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口，可是MF不支持。
解決辦法
直接使用window.open(pageURL,name,parameters)方式打開新窗口。
若是須要傳遞參數，可使用frame或者iframe。

20、對高度的解析
IE：將根據內容的高度變化，包括未定義高度的圖片內容，即便定義了高度，當內容超太高度時，將使用實際高度

Firefox：沒有定義高度時，若是內容中包括了圖片內容，MF的高度解析是根據印刷標準，這樣就會形成和實際內容高度不符合的狀況；當定義了高度，可是內容超太高度時，內容會超出定義的高度，可是區域使用的樣式不會變化，形成樣式錯位。

結論：你們在能夠肯定內容高度的狀況下最好定義高度，若是真的沒有辦法定義高度，最好不用使用邊框樣式，不然樣式確定會出現混亂！

2一、img對象alt和title的解析
alt：當照片不存在或者load錯誤時的提示；

title：照片的tip說明。

在IE中若是沒有定義title，alt也能夠做爲img的tip使用，可是在MF中，二者徹底按照標準中的定義使用

結論：你們在定義img對象時，最後將alt和title對象都寫全，保證在各類瀏覽器中都能正常使用

2二、其餘的細節差異

當你在寫css的時候，特別是用float: left（或right）排列一竄圖片時，會發如今firefox裏面正常而IE裏面有問題。不管你用margin:0,仍是border: 0來約束，都無濟於事。

其實這裏還有另一個問題，就是IE對於空格的處理，firefox是忽略的而IE對於塊與塊之間的空格是處理的。也就是說一個div結束後要緊接着一個div寫，中間不要有回車或者空格。否則也許會有問題，好比3px的誤差，並且這個緣由很難發現。

很是不走運的是我又碰到了這樣的問題，多個img標籤連着，而後定義的float: left，但願這些圖片能夠連起來。可是結果在firefox裏面正常而IE裏面顯示的每一個img都相隔了3px。我把標籤之間的空格都刪除都沒有做用。

後來的解決方法是在img外面套li，而且對li定義margin: 0，這樣就解決了IE和firefox的顯示誤差。IE對於一些模型的解釋會產生不少錯誤問題，只有多多嘗試才能發現緣由。

2三、在鏈接事件處理函數的時候，能夠用Inline HTML方式，也能夠用Event
             property方式定義。
           
                 一、使用Inline HTML方式，如：
                 <input type=」radio」 name=」radio」 value=」1″
                     onclick=」javascript:a(event)」>
               
                     注意：
                     (1)javascript不能省；
                     (2)實參要使用event，形參使用什麼均可以(如evt、event等)；
               
                 二、使用Event property方式綁定事件處理函數，如：
                     document.form2.radio[0].onclick = a;
2四、在mf中，本身定義的屬性必須getAttribute()取得
2五、在mf中沒有   parentElement parement.children   而用
                parentNode parentNode.childNodes
    childNodes的下標的含義在IE和MF中不一樣，MF使用DOM規範，childNodes中會插入空白
    文本節點。
   通常能夠經過node.getElementsByTagName()來回避這個問題。
    當html中節點缺失時，IE和MF對parentNode的解釋不一樣，例如
    <form>
    <table>
         <input/>
    </table>
    </form>
    MF中input.parentNode的值爲form, 而IE中input.parentNode的值爲空節點

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

2六、const 問題    (1)現有問題:       在 IE 中不能使用 const 關鍵字。如 const constVar = 32;       在IE中這是語法錯誤。    (2)解決方法:       不使用 const ，以 var 代替。 2七、 body 對象     MF的body在body標籤沒有被瀏覽器徹底讀入以前就存在，而IE則必須在body徹底被讀入     以後才存在 2八、url encoding      在js中若是書寫url就直接寫&不要寫&例如          var url = ’xx.jsp?objectName=xx&objectEvent=xxx’;      frm.action = url那麼頗有可能url不會被正常顯示以致於參數沒有正確的傳到服務器      通常會服務器報錯參數沒有找到      固然若是是在tpl中例外，由於tpl中符合xml規範，要求&書寫爲&      通常MF沒法識別js中的& 2九、nodeName 和 tagName 問題    (1)現有問題：       在MF中，全部節點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，       nodeName 的使用好象       有問題（具體狀況沒有測試，但個人IE已經死了好幾回）。    (2)解決方法：       使用 tagName，但應檢測其是否爲空。