documentformitem 問題
()現有問題
現有代碼中存在許多 documentformNameitem("itemName") 這樣的語句不能在Firefox(火狐)下運行
()解決方法
改用 documentformNameelements["elementName"]
集合類對象問題
()現有問題
現有代碼中許多集合類對象取用時使用 ()IE 能接受Firefox(火狐)不能
()解決方法
改用 [] 作為下標運算如
documentforms("formName") 改為 documentforms["formName"]
又如
documentgetElementsByName("inputName")() 改為documentgetElementsByName("inputName")[]
windowevent
()現有問題
使用 windowevent 無法在火狐浏覽器上運行
()解決方法
火狐 的 event 只能在事件發生的現場使用此問題暫無法解決可以這樣變通
原代碼(可在IE中運行)
新代碼(可在IE和火狐中運行)
此外如果新代碼中第一行不改與老代碼一樣的話(即 gotoSubmit 調用沒有給參數)則仍然只能在IE中運行但不會出錯所以這種方案 tpl 部分仍與老代碼兼容
HTML 對象的 id 作為對象名的問題
()現有問題
在 IE 中HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用在火狐中不能
()解決方法
用 getElementById("idName") 代替 idName 作為對象變量使用
用idName字符串取得對象的問題
()現有問題
在IE中利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象在火狐中不能
()解決方法
用 getElementById(idName) 代替 eval(idName)
變量名與某 HTML 對象 id 相同的問題
()現有問題
在火狐中因為對象 id 不作為 HTML 對象的名稱所以可以使用與 HTML 對象 id 相同的變量名IE中能
()解決方法
在聲明變量時一律加上 var 以避免歧義這樣在 IE 中亦可正常運行
此外最好不要取與 HTML 對象 id 相同的變量名以減少錯誤
eventx 與 eventy 問題
()現有問題
在IE 中event 對象有 x y 屬性火狐中沒有
()解決方法
在火狐中與eventx 等效的是 eventpageX但eventpageX IE中沒有故采用 eventclientX 代替 eventx在IE 中也有這個變量eventclientX 與 eventpageX 有微妙的差別（當整個頁面有滾動條的時候）不過大多數時候是等效的
如果要完全一樣可以稍麻煩些 mX = eventx ? eventx : eventpageX; 然後用 mX 代替 eventx
()其它
eventlayerX 在IE與火狐中都有具體意義有無差別尚未試驗
關於frame
()現有問題
在 IE中 可以用windowtestFrame取得該frame火狐中不行
()解決方法
在frame的使用方面火狐和ie的最主要的區別是
如果在frame標簽中書寫了以下屬性
<frame src="xxhtm" id="frameId" name="frameName" />
那麼ie可以通過id或者name訪問這個frame對應的window對象 而火狐只可以通過name來訪問這個frame對應的window對象 例如如果上述frame標簽寫在最上層的window裡面的htm裡面那麼可以這樣訪問 ie windowtopframeId或者windowtopframeName來訪問這個window對象
火狐只能這樣windowtopframeName來訪問這個window對象
另外在火狐和ie中都可以使用 windowtopdocumentgetElementById("frameId")來訪問frame標簽 並且可以通過windowtopdocumentgetElementById("testFrame")src = xxhtm來切換frame的內容 也都可以通過windowtopframeNamelocation =xxhtm來切換frame的內容 關於frame和window的描述可以參見bbs的‘window與frame’文章 以及/test/js/test_frame/目錄下面的測試
在火狐中自己定義的屬性必須getAttribute()取得
在火狐中沒有 parentElement parementchildren 而用
parentNode parentNodechildNodes childNodes的下標的含義在IE和火狐中不同火狐使用DOM規范childNodes中會插入空白文本節點
一般可以通過nodegetElementsByTagName()來回避這個問題
當html中節點缺失時IE和火狐對parentNode的解釋不同例如
<form>
<table>
<input/>
</table>
</form>
火狐中inputparentNode的值為form 而IE中inputparentNode的值為空節點
火狐中節點沒有removeNode方法必須使用如下方法 nodeparentNoderemoveChild(node)
const 問題
()現有問題:
在 IE 中不能使用 const 關鍵字如 const constVar = ; 在IE中這是語法錯誤
()解決方法:
不使用 const 以 var 代替
body 對象
火狐的body在body標簽沒有被浏覽器完全讀入之前就存在而IE則必須在body完全被讀入之後才存在
url encoding
在js中如果書寫url就直接寫&不要寫&例如var url = xxjsp?objectName=xx&objectEvent=xxx; frmaction = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到服務器 一般會服務器報錯參數沒有找到 當然如果是在tpl中例外因為tpl中符合xml規范要求&書寫為& 一般火狐無法識別js中的&
nodeName 和 tagName 問題
()現有問題
在火狐中所有節點均有 nodeName 值但 textNode 沒有 tagName 值在 IE 中nodeName 的使用好象 有問題（具體情況沒有測試但我的IE已經死了好幾次）
()解決方法
使用 tagName但應檢測其是否為空
元素屬性
IE下 inputtype屬性為只讀但是火狐下可以修改
documentgetElementsByName() 和 documentall[name] 的問題
()現有問題
在 IE 中getElementsByName()documentall[name] 均不能用來取得 div 元素（是否還有其它不能取的元素還不知道）
最簡單的鼠標移過手變型的css要改了
cursor:pointer;/*ff不支持cursor:hand*/ dw下面自動出來的也沒有hand這個屬性了標准的是pointer
ff不支持濾鏡 最常見的半透明不支持
filter: Alpha(Opacity=); /* for IE */
opacity: ;/* for Firefox */
style="mozopacity:; filter:alpha(opacity=);cursor:hand;" onmouseover="thisstyleMozOpacity=;
thisfiltersalphaopacity=" onmouseout="thisstyleMozOpacity=;
thisfiltersalphaopacity="
ff不支持expression 例如去掉鏈接的邊框要分別寫不同的css
aarea { blr:expression(thisonFocus=thisblur()) } /* for IE */
:focus { outline: none; } /* for Firefox */
ff不支持div滾動條的顏色設置目前還沒有找到替換的 好方法
contendiv {
position: absolute; left: px; top: px; width: px;height: px;
lineheight:%;textalign:left; fontfamily:"宋體";wordbreak : breakall; color:#DE;
OVERFLOWY:auto;OVERFLOWX:no;
SCROLLBARARROWCOLOR: red; SCROLLBARTRACKCOLOR: FFF;SCROLLBARFACECOLOR:#FFF;SCROLLBARSHADOWCOLOR:#FFF;
SCROLLBARDARKSHADOWCOLOR:#FFF;SCROLLBARDLIGHTCOLOR:#FFF;SCROLLBARHIGHLIGHTCOLOR:#FFF;
}
這個在ff裡面完全沒有效果了
ie下面顯示在文字下面橫線的
borderwidth: px px px px;在ff裡面跑到文字上面去了（查了手冊還是沒有找到解決的辦法感覺莫名奇妙～～ 原來是ff的容錯能力太差了是下面的width: px;height: px;寬高 引起的其實a:haver已經繼承了上級的屬性了只要定義不同的樣式就可以了看來ff有助於制作標准化簡潔化的網頁啊對css的理解也更深刻對提供css來說是個很好的幫助）
onelinksdiv a:hover {
display: block;borderstyle: solid;color: #ff;borderwidth: px px px px;
/*
display: block;borderstyle: solid; borderwidth: px px px px; width: px;height: px; color: #ff; fontsize: px;textalign: right;
*/
}
//下面的寫法在ie下面正常但在ff下是錯誤的
onelinksdiv a:hover {
display: block;border: #ff solid; borderwidth: px px px px;
width: px;height: px; color: #ff; fontsize: px;textalign: right;
}
相關參考資料
borderwidth:bordertopwidth borderrightwidth borderbottomwidth borderleftwidth; p#fourborders
{
borderwidth:thick medium thin px;
}
如果定義四個值那麼這四個值就分別是上右下左邊框的寬度值(從上邊框開始以逆時針的順序遍歷)
等價於下面的定義
p#fourborders
{
bordertopwidth:thick;
borderrightwidth:medium;
borderbottomwidth:thin;
borderleftwidth:px;
}
ff不支持<body scroll="no" > scroll屬性
必須定義overflow:hidden;而且要在html標簽下不能在 body下
html{
overflow:hidden;
}
ff不支持數據島綁定
<xml id="news" src="newsxml" ></xml>在ie下可以加載進數據但到了火狐就加載不進數據了開始以為可能是因為內容行文字太多導致不能斷行不能加載但刪除 只剩幾個字以後一樣不行
style="wordbreak:breakall"
在網頁中的單元 格裡的內容超出一行時在ie浏覽器裡定義的換行樣式能夠正常使 用但在firefox裡卻不能被支持了style="wordbreak:breakall" 是MS擴展的IE專有屬性並未成為WC標准因而 Firefox 還不能支持它不過MS已經將其提交到了WC而在WC的CSS的候選方案中也能看到它希望這個屬性在被WC最終定案的為CSS標准 後Firefox可以支持吧這之前可以試試
style="tablelayout:fixed;wordwrap: breakword" （當它是英文的時候就不能正常換行了）
目前FF為止都不支持IE的name錨點
像這種寫法都是不支持的<a href="###" onclick="historygo()">go back</a>
原來根據WC的語法<a>標簽始終都會查找href地址並跳轉過去現在onclick事件與###這個地址又有沖突
為了讓Firefox與IE部分元素屬性兼容那個費勁我無意中發現 Firefox對空格敏感
<a onclick="windowlocationhref =faqphp?page=messages#"> //有空格錨點作用
<a onclick="windowlocationfaqphp?page=messages#"> //無空格錨點無作用
錨點的寫法又十分講究比如<a name=#>Firefox不支持錨點得加上id=#
靜態同頁面引用時必須這樣寫<a href="#"></a><a href="statichtml#"></a>就不行****態頁面要用JS
後遺症來了考慮到鼠標樣式和浏覽器兼容又開始折騰
<a href="###" onclick=""> //不兼容
<a href="javascript:;" onclick=""> //不兼容
<a href="javascript:function();"> //沒有{}屬於腳本的非法書寫
<a style="cursor:hand" onclick=""> //沒照顧到自定義系統鼠標樣式的用戶
<a href="javascript:)"
本以為火狐浏覽器使用的人很多但從網站的統計分析來看火狐只有可憐的%但兼容他的標准確花費不少精力！不過標准化有利於以後的維護和擴展有利於技術的不斷提示
>
問題十四OVERFLOWY:auto;OVERFLOWX:hidden;在IE裡面可以用no表示隱藏但在FireFox（火狐）裡面必須用hidden
From:http://tw.wingwit.com/Article/program/PHP/201311/21315.html
