Internet Explorer(IE)與Firefox(FF)中不同的Javascript

 

最近快要被DIV+CSS的兼容性問題折騰瘋瞭,真受不瞭各大瀏覽器搞的什麼標準?害得咱們小小的web程序員跟著這些瀏覽器的“爛問題”滴溜溜的轉

原文如下,自己看吧,我已經暈瞭:

1.firefox不能對innerText支持。

firefox支持innerHTML但卻不支持innerText,它支持textContent來實現innerText,不過默認把多餘的空格也保留瞭。如果不用textContent,如果字符串裡面不包含HTML代碼也可以用innerHTML代替。

2.禁止選取網頁內容:

在IE中一般用js:obj.onselectstart=function(){return false;}

而firefox用CSS:-moz-user-select:none

3.濾鏡的支持(例:透明濾鏡):

IE:filter:alpha(opacity=10);

firefox:-moz-opacity:.10;

4.捕獲事件:

IE:obj.setCapture() 、obj.releaseCapture()

Firefox:document.addEventListener("mousemove",mousemovefunction,true);

    document.removeEventListener("mousemove",mousemovefunction,true);

5.獲取鼠標位置:

IE:event.clientX、event.clientY

firefox:需要事件函數傳遞事件對象

    obj.onmousemove=function(ev){

    X= ev.pageX;Y=ev.pageY;

    }

6.DIV等元素的邊界問題:

比如:設置一個p的CSS::{width:100px;height:100px;border:#000000 1px solid;}

IE中:p的寬度(包括邊框寬度):100px,p的高度(包括邊框寬度):100px;

而firefox:p的寬度(包括邊框寬度):102px,p的高度(包括邊框寬度):102px;

所以在做這個兼容IE和firefox的拖動窗口時,在js和css的寫法上要動點腦筋,給大傢兩個小技巧

一.判斷瀏覽器類型:

var isIE=document.all? true:false;

我寫瞭一個變量,如果支持document.all語法那麼isIE=true,否則isIE=false

二.在不同瀏覽器下的CSS處理:

一般可以用!important來優先使用css語句(僅firefox支持)

比如:{border-width:0px!important;border-width:1px;}

在firefox下這個元素是沒有邊框的,在IE下邊框寬度是1px

1.document.formName.item("itemName") 問題

  問題說明:IE下,可以使用document.formName.item("itemName") 或document.formName.elements ["elementName"];Firefox下,隻能使用document.formName.elements["elementName"]。

  解決方法:統一使用document.formName.elements["elementName"]。

  2.集合類對象問題

  問題說明:IE下,可以使用() 或[] 獲取集合類對象;Firefox下,隻能使用[ ]獲取集合類對象。

  解決方法:統一使用[] 獲取集合類對象。

  3.自定義屬性問題

  問題說明:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute() 獲取自定義屬性;Firefox下,隻能使用getAttribute() 獲取自定義屬性。

  解決方法:統一通過getAttribute() 獲取自定義屬性。

  4.eval("idName")問題

  問題說明:IE下,可以使用eval("idName") 或getElementById("idName") 來取得id 為idName 的HTML對象;Firefox下,隻能使用getElementById("idName") 來取得id 為idName 的HTML對象。

  解決方法:統一用getElementById("idName") 來取得id 為idName 的HTML對象。

  5.變量名與某HTML對象ID相同的問題

  問題說明:IE下,HTML對象的ID可以作為document 的下屬對象變量名直接使用,Firefox下則不能;Firefox下,可以使用與HTML對象ID相同的變量名,IE下則不能。

  解決方法:使用document.getElementById("idName") 代替document.idName。最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var關鍵字,以避免歧義。

  6.const問題

  問題說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,隻能使用var關鍵字來定義常量。

  解決方法:統一使用var關鍵字來定義常量。

  7.input.type屬性問題

  問題說明:IE下input.type 屬性為隻讀;但是Firefox下input.type 屬性為讀寫。

解決辦法:不修改input.type 屬性。如果必須要修改,可以先隱藏原來的input,然後在同樣的位置再插入一個新的input元素。

  8.window.event問題

  問題說明:window.event 隻能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event隻能在事件發生的現場使用。

  解決方法:在事件發生的函數上加上event參數,在函數體內(假設形參為evt)使用var myEvent = evt?evt:(window.event?window.event:null)

示例:<input type="button" onclick="doSomething(event)"/>

  <script language="javascript">

  function doSomething(evt) {

  var myEvent = evt?evt:(window.event?window.event:null)

  …

  }

9.event.x與event.y問題

  問題說明:IE下,even對象有x、y屬性,但是沒有pageX、pageY屬性;Firefox下,even對象有pageX、pageY屬性,但是沒有x、y屬性。

  解決方法:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

如果考慮第8條問題,就改用myEvent代替event即可。

  10.event.srcElement問題

  問題說明:IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性。

  解決方法:使用srcObj = event.srcElement ? event.srcElement : event.target;

如果考慮第8條問題,就改用myEvent代替event即可。

  11.window.location.href問題

  問題說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,隻能使用window.location。

  解決方法:使用window.location 來代替window.location.href。當然也可以考慮使用location.replace()方法。

  12.模態和非模態窗口問題

  問題說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能。

  解決方法:直接使用window.open(pageURL,name,parameters) 方式打開新窗口。

如果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口。如果需要父窗口控制子窗口的話,使用var subWindow = window.open(pageURL,name,parameters); 來獲得新開的窗口對象。

  13.frame和iframe問題

  以下面的frame為例:

  <frame src="xxx.html" id="frameId" name="frameName" />

  (1)訪問frame對象

  IE:使用window.frameId或者window.frameName來訪問這個frame對象;

  Firefox:使用window.frameName來訪問這個frame對象;

解決方法:統一使用window.document.getElementById("frameId") 來訪問這個frame對象;

  (2)切換frame內容

  在IE和Firefox中都可以使用window.document.getElementById("frameId").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容;

  如果需要將frame中的參數傳回父窗口,可以在frame中使用parent關鍵字來訪問父窗口。

  14.body載入問題

  問題說明:Firefox的body對象在body標簽沒有被瀏覽器完全讀入之前就存在;而IE的body對象則必須在body標簽被瀏覽器完全讀入之後才存在。

[註] 這個問題尚未實際驗證,待驗證後再來修改。

[註] 經驗證,IE6、Opera9以及FireFox2中不存在上述問題,單純的JS腳本可以訪問在腳本之前已經載入的所有對象和元素,即使這個元素還沒有載入完成。

  15. 事件委托方法

  問題說明:IE下,使用document.body.onload = inject; 其中function inject()在這之前已被實現;在Firefox下,使用document.body.onload = inject();

  解決方法:統一使用document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 這裡是代碼*/}

[註意] Function和function的區別

  16.訪問的父元素的區別

  問題說明:在IE下,使用obj.parentElement 或obj.parentNode 訪問obj的父結點;在firefox下,使用obj.parentNode 訪問obj的父結點。

  解決方法:因為firefox與IE都支持DOM,因此統一使用obj.parentNode 來訪問obj的父結點。

  17.cursor:hand VS cursor:pointer

  問題說明:firefox不支持hand,但ie支持pointer ,兩者都是手形指示。

  解決方法:統一使用pointer。

  18.innerText的問題.

問題說明:innerText在IE中能正常工作,但是innerText在FireFox中卻不行。

解決方法:在非IE瀏覽器中使用textContent代替innerText。

示例:

  if(navigator.appName.indexOf("Explorer") >-1){

  document.getElementById('element').innerText = "my text";

  } else{

  document.getElementById('element').textContent = "my text";

  }

[註] innerHTML 同時被ie、firefox等瀏覽器支持,其他的,如outerHTML等隻被ie支持,最好不用。

  19. 對象寬高賦值問題

  問題說明:FireFox中類似obj.style.height = imgObj.height 的語句無效。

解決方法:統一使用obj.style.height = imgObj.height + 'px';

  20. Table操作問題

問題說明:ie、firefox以及其它瀏覽器對於table 標簽的操作都各不相同,在ie中不允許對table和tr的innerHTML賦值,使用js增加一個tr時,使用appendChild方法也不管用。

  解決方法:

  //向table追加一個空行:

  var row = otable.insertRow(-1);

  var cell = document.createElement("td");

  cell.innerHTML = "";

  cell.className = "XXXX";

  row.appendChild(cell);

[註] 由於俺很少使用JS直接操作表格,這個問題沒有遇見過。建議使用JS框架集來操作table,如JQuery。

  21. ul和ol列表縮進問題

  消除ul、ol等列表的縮進時,樣式應寫成:list-style:none;margin:0px;padding:0px;

  其中margin屬性對IE有效,padding屬性對FireFox有效。← 此句表述有誤,詳細見↓

[註] 這個問題尚未實際驗證,待驗證後再來修改。

[註] 經驗證,在IE中,設置margin:0px可以去除列表的上下左右縮進、空白以及列表編號或圓點,設置padding對樣式沒有影響;在Firefox中,設置margin:0px僅僅可以去除上下的空白,設置padding:0px後僅僅可以去掉左右縮進,還必須設置list-style:none才能去除列表編號或圓點。也就是說,在IE中僅僅設置margin:0px即可達到最終效果,而在Firefox中必須同時設置margin:0px、padding:0px以及list-style:none三項才能達到最終效果。

  22. CSS透明問題

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

  FF:opacity:0.6。

[註] 最好兩個都寫,並將opacity屬性放在下面。

  23. CSS圓角問題

  IE:ie7以下版本不支持圓角。

  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;。

[註] 圓角問題是CSS中的經典問題,建議使用JQuery框架集來設置圓角,讓這些復雜的問題留給別人去想吧。

  關於CSS中的問題實在太多瞭,甚至同樣的CSS定義在不同的頁面標準中的顯示效果都是不一樣的。一個合乎發展的建議是,頁面采用標準DHTML標準編寫,較少使用table,CSS定義盡量依照標準DOM,同時兼顧IE、Firefox、Opera等主流瀏覽器。BTW,很多情況下,FF和Opera的CSS解釋標準更貼近CSS標準,也更具有規范性

本文來源:關濤的博客https://www.hnzyb.com/

原文鏈接:https://www.hnzyb.com/blog/?id=1451

 

1. document.form.item 問題

(1)現有問題:

現有代碼中存在許多document.formName.item("itemName") 這樣的語句,不能在Firefox(火狐)下運行

(2)解決方法:

改用document.formName.elements["elementName"]

(3)其它

參見2

2. 集合類對象問題

(1)現有問題:

現有代碼中許多集合類對象取用時使用(),IE 能接受,Firefox(火狐)不能。

(2)解決方法:

改用[] 作為下標運算。如:document.forms("formName") 改為document.forms["formName"]。

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

(3)其它

3. window.event

(1)現有問題:

使用window.event 無法在火狐瀏覽器上運行

(2)解決方法:

火狐 的event 隻能在事件發生的現場使用,此問題暫無法解決。可以這樣變通:

原 代碼(可在IE中運行):<br /><input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/><br />…<br /><script language="javascript"><br />function gotoSubmit() {<br />…<br />alert(window.event); // use window.event<br />…<br />}<br /></script>

新 代碼(可在IE和火狐中運行):<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/><br />…<br /><script language="javascript"><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 的下屬對象變量名直接使用。在火狐中不能。

(2)解決方法

用getElementById("idName") 代替idName 作為對象變量使用。

5. 用idName字符串取得對象的問題

(1)現有問題

在IE中,利用eval(idName) 可以取得id 為idName 的HTML 對象,在火狐中不能。

(2)解決方法

用getElementById(idName) 代替eval(idName)。

6. 變量名與某HTML 對象id 相同的問題

(1)現有問題

在 火狐 中,因為對象id 不作為HTML 對象的名稱,所以可以使用與HTML 對象id 相同的變量名,IE中能。

(2)解決方法

在聲明變量時,一律加上var ,以避免歧義,這樣在IE 中亦可正常運行。

此外,最好不要取與HTML 對象id 相同的變量名,以減少錯誤。

(3)其它

參見 問題4

7. event.x 與event.y 問題

(1)現有問題

在IE 中,event 對象有x, y 屬性,火狐中沒有。

(2)解決方法

在火狐中,與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與火狐中都有,具體意義有無差別尚未試驗。

8. 關於frame

(1)現有問題

在IE中 可以用window.testFrame取得該frame,火狐中不行

(2)解決方法

在frame的使用方面火狐和ie的最主要的區別是:

如果在frame標簽中書寫瞭以下屬性:

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

那麼ie可以通過id或者name訪問這個frame對應的window對象

而火狐隻可以通過name來訪問這個frame對應的window對象

例如如果上述frame標簽寫在最上層的window裡面的htm裡面,那麼可以這樣訪問

ie:window.top.frameId或者window.top.frameName來訪問這個window對象

火狐: 隻能這樣window.top.frameName來訪問這個window對象

另外,在火狐和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. 在火狐中,自己定義的屬性必須getAttribute()取得

10.在火狐中沒有parentElement parement.children 而用

parentNode parentNode.childNodes

childNodes的下標的含義在IE和火狐中不同,火狐使用DOM規范,childNodes中會插入空白文本節點。

一般可以通過node.getElementsByTagName()來回避這個問題。

當html中節點缺失時,IE和火狐對parentNode的解釋不同,例如

<form>

<table>

<input/>

</table>

</form>

火狐中input.parentNode的值為form, 而IE中input.parentNode的值為空節點

火狐中節點沒有removeNode方法,必須使用如下方法node.parentNode.removeChild(node)

11.const 問題

(1)現有問題:

在IE 中不能使用const 關鍵字。如const constVar = 32; 在IE中這是語法錯誤。

(2)解決方法:

不使用const ,以var 代替。

12. body 對象

火狐的body在body標簽沒有被瀏覽器完全讀入之前就存在,而IE則必須在body完全被讀入之後才存在

13. url encoding

在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';

frm.action = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到服務器

一般會服務器報錯參數沒有找到

當然如果是在tpl中例外,因為tpl中符合xml規范,要求&書寫為&

一般火狐無法識別js中的&

14. nodeName 和tagName 問題

(1)現有問題:

在火狐中,所有節點均有nodeName 值,但textNode 沒有tagName 值。在IE 中,nodeName 的使用好象

有問題(具體情況沒有測試,但我的IE已經死瞭好幾次)。

(2)解決方法:

使用tagName,但應檢測其是否為空。

15. 元素屬性

IE下input.type屬性為隻讀,但是火狐下可以修改

16. document.getElementsByName() 和document.all[name] 的問題

(1)現有問題:

在IE 中,getElementsByName()、document.all[name] 均不能用來取得p 元素(是否還有其它不能取的元素還不知道)。

摘:https://firefox.sun-sky.com.cn/post/javascript.html

1.兼容firefox的outerHTML,FF中沒有outerHtml的方法。

if (window.HTMLElement) {

HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {

        var r=this.ownerDocument.createRange();

        r.setStartBefore(this);

        var df=r.createContextualFragment(sHTML);

        this.parentNode.replaceChild(df,this);

        return sHTML;

    });

    HTMLElement.prototype.__defineGetter__("outerHTML",function() {

    var attr;

        var attrs=this.attributes;

        var str="<"+this.tagName.toLowerCase();

        for (var i=0;i<attrs.length;i++) {

            attr=attrs;

            if(attr.specified)

                str+=" "+attr.name+'="'+attr.value+'"';

        }

        if(!this.canHaveChildren)

            return str+">";

        return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";

        });

HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {

    switch(this.tagName.toLowerCase()) {

        case "area":

        case "base":

        case "basefont":

        case "col":

        case "frame":

        case "hr":

        case "img":

        case "br":

        case "input":

        case "isindex":

        case "link":

        case "meta":

        case "param":

        return false;

    }

    return true;

});

}

 

3.自定義屬性問題

說明:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,隻能使用getAttribute()獲取自定義屬性.

解決方法:統一通過getAttribute()獲取自定義屬性.

 

4.eval("idName")問題

說明:IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象;Firefox下隻能使用getElementById("idName")來取得id為idName的HTML對象.

解決方法:統一用getElementById("idName")來取得id為idName的HTML對象.

5.變量名與某HTML對象ID相同的問題

說明:IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對象ID相同的變量名;IE下則不能。

解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義.

6.const問題

說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,隻能使用var關鍵字來定義常量.

解決方法:統一使用var關鍵字來定義常量.

7.input.type屬性問題

說明:IE下input.type屬性為隻讀;但是Firefox下input.type屬性為讀寫.

8.window.event問題

說明:window.event隻能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event隻能在事件發生的現場使用.

解決方法:

IE:

<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>

<script language="javascript">

function gotoSubmit8_1() {

alert(window.event); //use window.event

}

</script>

IE&Firefox:

<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>

<script language="javascript">

function gotoSubmit8_2(evt) {

evt=evt?evt:(window.event?window.event:null);

alert(evt); //use evt

}

</script>

9.event.x與event.y問題

說明:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性.

解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.

 

10.event.srcElement問題

說明:IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.

解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target.

11.window.location.href問題

說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,隻能使用window.location.

解決方法:使用window.location來代替window.location.href.

12.模態和非模態窗口問題

說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.

解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。

如 果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.frame問題

以下面的frame為例:

<frame src="xxx.html" id="frameId" name="frameName" />

(1)訪問frame對象:

IE:使用window.frameId或者window.frameName來訪問這個frame對象.

Firefox:隻能使用window.frameName來訪問這個frame對象.

另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.

(2)切換frame內容:

在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.

如果需要將frame中的參數傳回父窗口,可以在frme中使用parent來訪問父窗口。例如:parent.document.form1.filename.value="Aqing";

14.body問題

Firefox的body在body標簽沒有被瀏覽器完全讀入之前就存在;而IE的body則必須在body標簽被瀏覽器完全讀入之後才存在.

例如:

Firefox:

<body >

<script type="text/javascript">

document.body.onclick = function(evt){

evt = evt || window.event;

alert(evt);

}

</script>

</body>

IE&Firefox:

<body >

</body>

<script type="text/javascript">

document.body.onclick = function(evt){

evt = evt || window.event;

alert(evt);

} </script>

 

15. 事件委托方法

IE:document.body.onload = inject; //Function inject()在這之前已被實現

Firefox:document.body.onload = inject();

有人說標準是:

document.body.onload=new Function('inject()');

 

16. firefox與IE(parentElement)的父元素的區別

IE:obj.parentElement

firefox:obj.parentNode

解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.

 

17.cursor:hand VS cursor:pointer

firefox不支持hand,但ie支持pointer

解決方法: 統一使用pointer

 

18.innerText在IE中能正常工作,但是innerText在FireFox中卻不行.

解決方法:

if(navigator.appName.indexOf("Explorer") > -1){

    document.getElementById('element').innerText = "my text";

} else{

    document.getElementById('element').textContent = "my text";

}

 

19. FireFox中類似obj.style.height = imgObj.height 的語句無效

解決方法:

obj.style.height = imgObj.height + 'px';

 

20. IE,firefox以及其它瀏覽器對於table 標簽的操作都各不相同,在ie中不允許對table和tr的innerHTML賦值,使用js增加一個tr時,使用appendChile方法也不管用。

解決方法:

//向table追加一個空行:

var row = otable.insertRow(-1);

var cell = document.createElement("td");

cell.innerHTML = " ";

cell.className = "XXXX";

row.appendChild(cell);

 

21. padding 問題

padding 5px 4px 3px 1px FireFox無法解釋簡寫,

必須改成padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

 

22. 消除ul、ol等列表的縮進時

樣式應寫成:list-style:none;margin:0px;padding:0px;

其中margin屬性對IE有效,padding屬性對FireFox有效

 

23. CSS透明

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

FF:opacity:0.6。

 

24. 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;。

25. 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;

IE有3種方式都可以創建一個元素:

1 document.createElement("<input type=text>")

2 document.createElement("<input>")

3 document.createElement("input")

Firefox隻支持一種方式:

document.createElement("input");document.setAttribute(name,value);

————

註: 在一個節點下增加子節點IE也比Firefox下的方式要多.

IE:

1 node.insertBefore(Element)

2 node.insertAfter(Element)

3 node.appendChild(Element)

而Firefox僅支持node.appendChild.

在IE裡面,html元素如果可以作為容器,那麼在document.createElement創建元素時是無法設置name屬性的,比如:p,span,font等等。

相反不可以做為容器的,在用document.createElement創建元素時可以設置控件的name屬性,比如:input,button,a,img等等

You May Also Like