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 元素
(是否還有其它不能取的元素還不知道)。