ie與Firefox相容 部分整理

1. document.form.item 問題
(1)現有問題：
現有代碼中存在許多 document.formName.item("itemName") 這樣的語句，不能在Firefox(Firefox)下運行
(2)解決方案：
改用 document.formName.elements["elementName"]
2. 集合類對象問題
(1)現有問題：
現有代碼中許多集合類對象取用時使用 ()，IE 能接受，Firefox(Firefox)不能。
(2)解決方案：
改用 [] 作為下標運算。如：

document.forms("formName") 改為 document.forms["formName"]。

又如：

document.getElementsByName("inputName")(1) 改為document.getElementsByName("inputName")[1]

3. window.event

(1)現有問題：
使用 window.event 無法在Firefox瀏覽器上運行
(2)解決方案：
Firefox 的 event 只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通：
原代碼(可在IE中運行)：

<br /><input type="button" name="someButton" value="提交" onclick="java script:gotoSubmit()"/><br />...<br /><script language="java script"><br />function gotoSubmit() {<br />...<br />alert(window.event); // use window.event<br />...<br />}<br /></script>

新代碼(可在IE和Firefox中運行)：

<input type="button" name="someButton" value="提交" onclick="java script:gotoSubmit(event)"/><br />...<br /><script language="java script"><br />function gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ? window.event : null);<br />...<br />alert(evt); // use evt<br />...<br />}<br /></script>

此外，如果新代碼中第一行不改，與老代碼一樣的話(即 gotoSubmit 調用沒有給參數)，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍與老代碼相容。
4. HTML 對象的 id 作為對象名的問題
(1)現有問題
在 IE 中，HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在Firefox中不能。
(2)解決方案
用 getElementById("idName") 代替 idName 作為物件變數使用。
5. 用idName字串取得對象的問題
(1)現有問題
在IE中，利用 eva l(idName) 可以取得 id 為 idName 的 HTML 對象，在Firefox中不能。
(2)解決方案
用 getElementById(idName) 代替 eva l(idName)。
6. 變數名與某 HTML 對象 id 相同的問題
(1)現有問題
在Firefox中，因為對象 id 不作為 HTML 對象的名稱，所以可以使用與 HTML 對象 id 相同的變數名，IE中能。
(2)解決方案
在聲明變數時，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運行。
此外，最好不要取與 HTML 對象 id 相同的變數名，以減少錯誤。
7. event.x 與 event.y 問題
(1)現有問題
在IE 中，event 對象有 x, y 屬性，Firefox中沒有。
(2)解決方案
在Firefox中，與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與Firefox中都有，具體意義有無差別尚未實驗。
8. 關於frame
(1)現有問題
在 IE中 可以用window.testFrame取得該frame，Firefox中不行
(2)解決方案
在frame的使用方面Firefox和ie的最主要的區別是：
如果在frame標籤中書寫了以下屬性：

<frame src="xx.htm" id="frameId" name="frameName" />

那麼ie可以通過id或者name訪問這個frame對應的window對象 而Firefox只可以通過name來訪問這個frame對應的window對象 例如如果上述frame標籤寫在最上層的window裡面的htm裡面，那麼可以這樣訪問 ie： window.top.frameId或者window.top.frameName來訪問這個window對象
Firefox：只能這樣window.top.frameName來訪問這個window對象
另外，在Firefox和ie中都可以使用 window.top.document.getElementById("frameId")來訪問frame標籤 並且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容 也都可以通過window.top.frameName.location ='xx.htm'來切換frame的內容 關於frame和window的描述可以參見bbs的‘window與frame’文章 以及/test/js/test_frame/目錄下面的測試
9. 在Firefox中，自己定義的屬性必須getAttribute()取得
10.在Firefox中沒有 parentElement parement.children 而用
parentNode parentNode.childNodes childNodes的下標的含義在IE和Firefox中不同，Firefox使用DOM規範，childNodes中會插入空白文本節點。
一般可以通過node.getElementsByTagName()來迴避這個問題。
當html中節點缺失時，IE和Firefox對parentNode的解釋不同，例如

<form>
<table>
<input/>
</table>
</form>

Firefox中input.parentNode的值為form, 而IE中input.parentNode的值為空白節點
Firefox中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)
11.const 問題
(1)現有問題:
在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
(2)解決方案:
不使用 const ，以 var 代替。
12. body 對象
Firefox的body在body標籤沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之後才存在
13. url encoding
在js中如果書寫url就直接寫&不要寫&amp;例如var url = 'xx.jsp?objectName=xx&amp;objectEvent=xxx'; frm.action = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到伺服器 一般會伺服器報錯參數沒有找到 當然如果是在tpl中例外，因為tpl中符合xml規範，要求&書寫為&amp; 一般Firefox無法識別js中的&amp;
14. nodeName 和 tagName 問題
(1)現有問題：
在Firefox中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，nodeName 的使用好象 有問題（具體情況沒有測試，但我的IE已經死了好幾次）。
(2)解決方案：
使用 tagName，但應檢測其是否為空白。
15. 元素屬性
IE下 input.type屬性為唯讀，但是Firefox下可以修改
16. document.getElementsByName() 和 document.all[name] 的問題
(1)現有問題：
在 IE 中，getElementsByName()、document.all[name] 均不能用來取得 div 元素（是否還有其它不能取的元素還不知道）。
17.最簡單的滑鼠移過手變型的css要改了
cursor:pointer;/*ff不支援cursor:hand*/ dw8下面自動出來的也沒有hand這個屬性了，標準的是pointer
18.ff不支援濾鏡 最常見的半透明不支援。

filter: Alpha(Opacity=50); /* for IE */
opacity: .5;/* for Firefox */
style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"

19.ff不支援expression 例如去掉連結的邊框要分別寫不同的css

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */

20.ff不支援div捲軸的顏色設定，目前還沒有找到替換的 好方法。

.contendiv {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:"宋體";word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
這個在ff裡面完全沒有效果了。
21.ie下面顯示在文字下面橫線的
border-width: 0px 0px 1px 0px;在ff裡面跑到文字上面去了。（查了手冊還是沒有找到解決的辦法感覺莫名奇妙～～ 原來是ff的容錯能力太差了，是下面的width: 186px;height: 0px;寬高 引起的，其實a:haver已經繼承了上級的屬性了，只要定義不同的樣式就可以了，看來ff有助於製作標準化，簡潔化的網頁啊，對css的理解也更深刻，對提供css來說是個很好的協助）

.onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;
/*
display: block;border-style: solid; border-width: 0px 0px 1px 0px; width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
*/
}
//下面的寫法在ie下面正常，但在ff下是錯誤的
.onelinksdiv a:hover {
display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
}

相關參考資料：

border-width:border-top-width border-right-width border-bottom-width border-left-width; p#fourborders
{
border-width:thick medium thin 12px;
}

如果定義四個值,那麼這四個值就分別是上,右,下,左邊框的寬度值(從上邊框開始,以逆時針的順序遍曆).
等價於下面的定義

p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}

22.ff不支援<body scroll="no" > scroll屬性
必須定義overflow:hidden;而且要在html標籤下，不能在 body下

html{
overflow:hidden;
}

23.ff不支援資料島綁定
<xml id="news" src="news.xml" ></xml>在ie下可以載入進資料，但到了Firefox就載入不進資料了，開始以為可能是因為內容行文字太多導致不能斷行不能載入，但刪除 只剩幾個字以後一樣不行。
24.style="word-break:break-all"
在網頁中的單元 格裡的內容超出一行時,在ie瀏覽器裡定義的換行樣式能夠正常使 用,但在firefox裡卻不能被支援了.style="word-break:break-all" 是MS擴充的IE專有屬性，並未成為W3C標準，因而 Firefox 還不能支援它。不過MS已經將其提交到了W3C，而在W3C的CSS3的候選方案中也能看到它。希望這個屬性在被W3C最終定案的為CSS3標準 後，Firefox可以支援吧。這之前，可以試試
style="table-layout:fixed;word-wrap: break-word" （當它是英文的時候就不能正常換行了）
25.目前FF2.0為止都不支援IE的name錨點
像這種寫法都是不支援的：<a href="###" onclick="history.go(-1)">go back</a>
原來根據W3C的文法，<a>標籤始終都會尋找href地址並跳轉過去，現在onclick事件與###這個地址又有衝突。
為了讓Firefox與IE部分元素屬性相容，那個費勁，我無意中發現 Firefox對空格敏感：

<a onclick="window.location.href ='faq.php?page=messages#2'"> //有空格，錨點作用
<a onclick="window.location.href='faq.php?page=messages#2'"> //無空格，錨點無作用
錨點的寫法又十分講究，比如<a name=#1>，Firefox不支援錨點，得加上id=#1
靜態同頁面引用時必須這樣寫：<a href="#1"></a>，<a href="static.html#1"></a>就不行，動態網頁面要用JS
後遺症來了，考慮到滑鼠樣式和瀏覽器安全色又開始折騰：

<a href="###" onclick=""> //不相容
<a href="java script:;" onclick=""> //不相容
<a href="java script:function();">   //沒有{...},屬於指令碼的非法書寫
<a style="cursor:hand" onclick=""> //沒照顧到自訂系統滑鼠樣式的使用者
<a href="java script:onclick=''"> //狀態列會顯現，href有多長顯示多長
<a href=# onclick=""> //我用的

26.ffFirefox下面不支援document.all 屬性
必需用document.getElementById('idName');
以下是我的動畫轉場效果，在ie下正常，到了Firefox裡面就不動了，修改後可以切換圖 片但漸隱漸現的效果就沒有了。原因是Firefox不支援濾鏡filter,只好用半透明的div來實現了。

/*
company page
*/
function playcompanyimg()
{
window.setInterval('changecompanyimg();', interval);
}
function changecompanyimg()
{
/*
Firefox下面不支援document.all屬性的，必需用document.getElementById('idName');
*/
    //if (document.all)
//{
   /**
   以下兩句是在轉場效果前切換背景圖片的代碼，number、image和idtemp要設定全域變數才可以
   */
number = Math.floor(Math.random() * image.length);
   idtemp.src=image[number];
   //alert(number+" ii "+idtemp.src)
   /**
   以下兩句是實現投影片轉場效果的
   */
   //alert(do_transition);
   //document.all.companyimg.style.filter="progid:
     DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";
   /*
   document.all.companyimg.style.filter="progid:
   DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
   document.all.companyimg.filters[0].Apply();
   document.all.companyimg.filters[0].Play();
   */
   var companyimgidtmep = document.getElementById('companyimg');
  companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
   companyimgidtmep.filters[0].Apply();
   companyimgidtmep.filters[0].Play();
    //}
}

參考資料：
核心：FILTER:revealTrans(duration=1,transition=23); 一個IE濾鏡  
在其它的非IE瀏覽器雖然不支援這個濾鏡，但是支援透明濾鏡的，你可以分一下，IE下繼續使用你這個效果，而在非IE瀏覽器下用透明濾鏡：

style.opacity
opacity = 0.5 CSS3
style.MozOpacity
-moz-opacity: 0.5 Mozilla 裡等同上面這個濾鏡 這個濾鏡也適用於Netscape
style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 裡的透明濾鏡。
IE：
obj.filters.alpha.opacity
to meizz(梅花雪)

其實我想過你那個問題的。但是透明 opacity 這個他不是一個漸層的過程。一般這種圖片過度特效最多持續一秒把，最多最多兩秒 duration=2 超過2秒就很累贅，喧賓奪主了。
在2秒鐘裡面實現
g_img.style.filter="alpha(opacity="+i+")" 透明度的變化是比較累贅的事情。要用 window.setInterval 改變 i 的值， 而且還要調用幾十上百次window.setInterval
才能看到效果。
這樣的話，我覺得得不賠失，是為了特效而特效了
另外一種考慮是，畢竟非ie瀏覽器是少數，即使在ff下 沒有圖片過度特效，其實也沒什麼， 還是很流暢，不過就是看不到ie裡面的美而已。
27.ff下連結的onclick事件不起作用
<div id="bigwhatwedo" ><a href="java script:onclick = display('whatwedo')" target="">我們做什麼</a></div> 在ie下沒有問題，在ff下點擊了沒有反應。作了多次嘗試，換成onclick="display('whatwedo')"仍然不行，後來通過多次檢 查，搜尋仍然找不到門路，最後採用慣用的方法－－一步一步alert();出來看效果，原來是一個id的值寫錯了，但奇怪的是ie下面沒有關係？是 ie的容錯內容太強了還是Firefox的容錯內容太差了？不過還是喜歡Firefox的嚴謹和標準哈。可以讓人發現不少深層次的東西。哈哈。
28.ff中div定位不能通過js初始化
必須先設定值並且要設定度量單位 top:80px;left:212px;
29.ff不能用.click();方法開啟連結， 終於暫時性的解決了

<div><a href="#" onclick="test1(2)" id="a3_a">hello</a> </div>
<div>
<a href="" onclick ="test2(1)" id="b3">hello2</a></div>
<div><a href="java script:onclick =test2(1)" id="b3">hello3</a>觸發事件放在href="java script:onclick =test2(1)" 裡面ff無效</div>
<div onclick="test2(1)" id="b3">hello3</div>    
<script language="java script">
<!--
function test1(num)  
   {  
       window.alert(num);  
    }  
    function test2(num)  
    {  
var aaa_a = document.getElementById("a3_a");
       if(document.all)      {//if(getOs()=="MSIE"){//IE的處理
          aaa_a.click();      
    }        
     else
    {
      var evt = document.createEvent("MouseEvents");
       evt.initEvent("click",true,true);
       aaa_a.dispatchEvent(evt);
     }  
   }  
/*
判斷瀏覽器類型
*/
function getOs()
{
    var OsObject = "";
   if(navigator.userAgent.indexOf("MSIE")>0) {
        return "MSIE";
   }
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        return "Firefox";
   }
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
        return "Safari";
   }
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){
        return "Camino";
   }
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
        return "Gecko";
   }
}
//-->   </script>

<!-- 由於這裡的連結是index的iframe用href="#" 在ie中無法正常顯示，而用href="java script:onclick = display('whatwedo')"的方式Firefox不支援開啟第一個連結，Firefox必須用onclick="display('whoweare')"
本以為Firefox瀏覽器使用的人很多，但從網站的統計分析來看Firefox只有可憐的3.18%，但相容他的標準確花費不少精力！不過標準化有利於以後的維護和擴充，有利於技術的不斷提示。
-->
30.OVERFLOW- Y:auto;OVERFLOW-X:hidden
在ie裡面可以用no表示隱藏，但在ff裡面必須用hidden
總結一下：目前有十個不相容問題，還沒解決的有：
1.ff不支援div捲軸的顏色設定，目前還沒有找到替換的好方法，在許多標準 化的網站看到也是沒有解決這個問題。
2.ff不支援資料島綁定<xml id="news" src="news.xml" ></xml>在ie下可以載入進資料，但到了Firefox就載入不進資料了，開始以為可能是因為內容行文字太多導致不能斷行不能載入，但刪除 只剩幾個字以後一樣不行。用w3c代碼檢測軟體檢測了一下，原來是自訂的xml標籤通不過，所以Firefox就不認了。
3.Firefox不支援濾鏡filter，無法實現圖片切換中間變換的效果，只能通過透明度來設定，但很麻煩.（這個目前暫不實現了）