以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila 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. 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 問題
(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. 關于frame
(1)現有問題
在 IE中 可以用window.testFrame取得該frame，mf中不行
(2)解決方法
在frame的使用方面mf和ie的最主要的區別是：
如果在frame標簽中書寫了以下屬性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么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的內容
關于frame和window的描述可以參見bbs的‘window與frame’文章
以及/test/js/test_frame/目錄下面的測試
----adun 2004.12.09修改
9. 在mf中，自己定義的屬性必須getAttribute()取得
10.在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)
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下可以修改
1、瀏覽器事件的捕捉
在IE 下有一個全局的window.event，當事件觸發后可以直接使用，但是在fireFox下沒有這個東西，當調用觸發事件調用一個函數時，如果這個函數沒有形參，那么firefox會默認的把event（事件）傳進去，但是有參數時就不行啦，所以解決的辦法是，自己手動傳一個event進去，這樣就ok 了，具體代碼如下：
下面兩個函數，都是響應鼠標onclick時觸發的動作，第一個在ie下使用正常，但是在firefox下卻有問題，改成第二個那樣使用，就沒有問題了，注意調用方法的區別
view plaincopy to clipboardprint?
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
view plaincopy to clipboardprint?
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
其實event對象在ie以及firefox還有很多不同的特性，比如clienx，pagex等，但是由于在現在流行使用的js框架prototype中解決了很多這些問題，所以如果是在基于prototype下的開發，這些問題可以考慮得少一些了，只是上面提到的這個捕獲問題，prototype中并沒有完善的解決，所以單獨列出來，下面提及的關于js的也都只列出prototype中未解決的
2、關于透明度的設置
為了達到給層設置半透明的效果時，在IE和firefox下也有所不同，IE下，style的filter屬性有Alpha值可供使用，而firefox下沒有Alpha值，所以得指定style的MozOpacity，代碼見下：
<STYLE>
filter: Alpha(opacity=10); /*IE*/
-moz-opacity:.1; /*老版本FireFox 1.0 以前*/
opacity:0.1; /*新版本FireFox*/
</STYLE>
view plaincopy to clipboardprint?
<script language="javascript">
//設置一個id為screen的div的透明度為45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
<script language="javascript">
//設置一個id為screen的div的透明度為45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
3、定位層時的有趣問題
在定位層時，我們的做法是給層的style.left 和 style.top設置位置，但是今天發現了一個很有趣的問題，代碼如下：
view plaincopy to clipboardprint?
<script language="javascript">
//給一個id為dialog的層定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//問題出現了，在ie下，默認將層的左上角定位在（100px,100px）這個點上
//但是在firefox下卻死活都不行，后來發現，原來ie在你沒有指定單位的時候
//替你加上了單位“px”，而firefox比較“笨”
//他覺得你沒有指定單位，就不給你定位，好了，那么標準的寫法應該是這樣：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//這樣firefox也認了
</script>
<script language="javascript">
//給一個id為dialog的層定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//問題出現了，在ie下，默認將層的左上角定位在（100px,100px）這個點上
//但是在firefox下卻死活都不行，后來發現，原來ie在你沒有指定單位的時候
//替你加上了單位“px”，而firefox比較“笨”
//他覺得你沒有指定單位，就不給你定位，好了，那么標準的寫法應該是這樣：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//這樣firefox也認了
</script>
4、PNG透明背景的問題
PNG圖片在網站設計中是不可或缺的部分，最大的特點應該在于PNG可以無損壓縮，而且還可以設置透明，對于增強網站的圖片色彩效果有重要的作用。
但為什么PNG圖片卻沒有GIF和JPG圖片的使用來得廣泛呢，這個禍因應歸屬于微軟的IE瀏覽器（Firefox和Opera對PNG支持的比較好，而現在瀏覽器的主流IE6卻無法很好的支持）。不過微軟在最近也開始改過自新了，新出的的IE7可以很好的支持PNG，可以想象在未來的網絡世界，PNG圖片的重要性將會更加凸顯。
但在大家還在絕大多數的使用IE6的時候，我們又怎樣在IE6的世界去完美使用PNG圖片呢（PNG圖片的時候最重要的地方在于PNG透明背景圖片的運用）。我們應該慶幸我們是幸福的！IE5.5+的AlphaImageLoader濾鏡為通向png提供了一個道路，如果他載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。但IE5.0無法支持屬性，那只有完全絕望了，不過絕望的只是幾個，得到是絕大數，我們應該知足，知足才會常樂。
現在我們將通過Hack和AlphaImageLoader濾鏡來實現IE6下的PNG透明背景圖片。
先熟悉下濾鏡的語法：
view plaincopy to clipboardprint?
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。
sizingMethod : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
crop : 剪切圖片以適應對象尺寸。
image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale : 縮放圖片以適應對象的尺寸邊界。
src : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。
sizingMethod : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
crop : 剪切圖片以適應對象尺寸。
image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale : 縮放圖片以適應對象的尺寸邊界。
src : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
Firefox、Opera等完全支持PNG透明圖片的瀏覽器也支持子選擇器（>），而IE不識別（包括IE7），所有我們可以通過這來定義Firefox、Opera等瀏覽器中PNG圖片的樣式。如下
view plaincopy to clipboardprint?
<script language="javascript>
//給一個id為infoBox的層設置一個透明背景，背景圖片是down.png，代碼如下
//進行了瀏覽器判斷
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=down.png')";
}
</script>
<script language="javascript>
//給一個id為infoBox的層設置一個透明背景，背景圖片是down.png，代碼如下
//進行了瀏覽器判斷
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=down.png')";
}
</script>
不過需要注意的一個地方：
使用AlphaImageLoader 后該區域的超鏈接和按鈕會失效，解決的方法：
對鏈接或按鈕直接設置相對位置，讓它們浮動于濾鏡區域的上面
16. document.getElementsByName() 和 document.all[name] 的問題
(1)現有問題：
在 IE 中，getElementsByName()、document.all[name] 均不能用來取得 div 元素（是否還有其它不能取的元素還不知道）。
posted on 2007-05-08 16:16
SIMONE 閱讀(1039)
評論(0) 編輯 收藏 所屬分類:
JavaScript