JS與DOM的兼容性

時間 2019-11-24

原文原文鏈接

1、JS與DOM的兼容性： javascript

(一) DOM節點的訪問： php

1.之前對DOM節點訪問通常用「document.All.元素ID屬性值」或者「document.元素ID屬性值」這種簡化的方法，在FireFox中有時不支持此方法。
解決辦法：標準的方法爲「document.getElementByIdx_x_xx(‘元素ID屬性值’)」或者「document.getElementByName(‘元素Name屬性值’)[0]」或者「document.getElementByTagName(‘元素標籤名’)[0]」； css

2.集合類對象的()與[]的問題：之前的代碼中不少集合類對象的訪問使用()，IE能夠正常解析，FireFox不支持。
解決辦法：改用[]做爲下標符號。如：document.Forms(‘FormName’)改成document.Forms[‘FormName’]；又如：document.getElementsByName(‘元素Name屬性值’)(1)改成document.getElementsByName(‘元素Name屬性值’)[1]； html

3.document.Form.Item的問題：FireFox不能正常解析形如：document.FormName.Item("ItemName")這樣的語句,但IE與FireFox都支持document.FormName.Elements["ElementName"]。
解決辦法：改用以下語句形式：document.FormName.Elements["ElementName"]； java

4.在IE中，能夠利用eval_r(‘元素ID屬性值’)的方法取得改HTML對象，FireFox不支持此種對象訪問方法。
解決辦法：用「document.getElementByIdx_x_xx(‘元素ID屬性值’)」的方法取得對象； node

5.在IE中能夠經過ID屬性值或者Name屬性訪問這個Frame對象,而FireFox只能夠經過Name屬性來訪問這個Frame對象;
IE和FireFox都可經過window.document. getElementById(‘FrameId屬性值’)來訪問這個Frame對象 web

6.在IE中body對象要在<body>標籤徹底讀入纔會存在，而在FireFox中一開始就存在瀏覽器

7.在IE中input標籤的type屬性是隻讀的，但在FireFox中是可讀寫的緩存

8.在IE中getElementsByName()、document.all[name]均不能用來取得div元素 app

9.IE,FireFox以及其它瀏覽器對於Table標籤的操做都各不相同，在IE中不容許對Table和TR的innerHTML賦值，使用JS增長一個TR時，使用appendChild方法也無論用。

解決辦法：
//向Table追加一個空行：
var row = otable.insertRow(-1);
var cell = document.createElement_x_x_x_x_x("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

10.在FireFox節點中沒有removeNode方法，必須使用以下方法 node.parentNode.removeChild(node)

11.IE或者FireFox2.0.x下,可使用window.location或window.location.href;但在FireFox1.5下，只能使用window.location
解決方法:使用window.location來代替window.location.href

12.IE與FireFox的訪問父元素有區別，IE爲Obj.ParentElement屬性;FireFox爲Obj.ParentNode屬性
解決辦法：由於FireFox與IE都支持DOM，所以統一用ParentNode屬性

13.FireFox不支持元素的innerText屬性，需用textContent
解決辦法：
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementByIdx_x_xx('element').innerText = "my text";
} else{
document.getElementByIdx_x_xx('element').textContent = "my text";
}

14.FireFox不支持元素的HtmlText屬性
解決辦法：
rng = document.createRange();
el = document.getElementByIdx_x_xx(ElementId);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()){ //清除原有內容，加入新內容
el.RemoveChild(el.LastChild);
}
el.AppendChild(htmlFrag);

15.在IE下能夠用<Img Id="pic" OnClick="this.src= ‘aa.php’" src="aa.php" style="cursor: pointer"/> 能夠刷新圖片，但在FireFox下因爲緩存問題不行。
解決辦法：在地址後面加個隨機數：編輯onclick事件代碼以下："this.src=this.src+’?’+Math.random()"

16.在訪問某一節點如childNodes[i]時，要得到該節點的值而這個值是<![CDATA[]]類型，那麼在IE中可支持這樣訪問childNodes[i].text或childNodes[i].firstChild.nodeValue；在FireFox只支持childNodes[i].firstChild.nodeValue
解決辦法：統一用childNodes[i].firstChild.nodeValue方法訪問節點元素值

17.在形如
<root>
<en>text</en>
</root>
格式的XML,在IE中<en>是<root>的第一個子節點，可經過root.childNodes[0]或root.firstChild訪問，但在FireFox中<en>是<root>的第二個子節點，第一個子元素是換行符，NodeType是#text;若是將XML換成以下格式
<root><en>text</en></root>
在IE和FireFox中<en>都是<root>的第一個子節點

18.在用JS建立單選按鈕上的方法上，IE與其它瀏覽器不一樣，要寫出通用的建立方法就須要一種瀏覽器嗅探機制(browser-sniffing);IE是惟一可以識別uniqueID這一document對象專屬屬性的瀏覽器，故可用該屬性區分瀏覽器類型；代碼以下：

if(document.uniqueID){
//Internet Explorer
var radioButtion = document.createElement_x_x_x_x_x("<input type='radio' name='radioButtion' value ='checked'>");
}else{
//Standards Compliant
var readioButtion = document.createElement_x_x_x_x_x("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
}

19.刪除select列表標籤的列表項應該用obj.remove(i);而不是用obj.options.remove(i);

20.添加select列表標籤的列表項應該用
var oOption = document.createElement_x_x_x_x_x('option');
oOption.text = text;
oOption.value = value;
targetArea.options[targetArea.options.length]= oOption; //new Option(text,value);
而不是用
var oOption = document.createElement_x_x_x_x_x('option');
oOption.text = text;
oOption.value = value;
targetArea.options.add(oOption);

21.IE中通常這樣初始化一個XMLDOM對象

(二) DOM節點屬性的訪問：

1.原來在IE中設置HTML對象屬性的方法如：document.all.apple.width=100或者apple.width=100；如今爲了可以和FireFox兼容，對象屬性的設置寫爲：document.getElementByIdx_x_xx(‘元素ID屬性值’).setAttribute(‘width’, ‘100’)
document.getElementsByTagName_r(‘元素標籤名’)[0].setAttribute(‘width’, ‘100’)
對象屬性的獲取寫爲：
document.getElementByIdx_x_xx(‘元素ID屬性值’).getAttribute(‘width’)
document.getElementsByTagName_r(‘元素標籤名’)[0].getAttribute(‘width’)

2.(接上條) 在IE下不能正確使用setAttribute來設置對象的style、class以及事件響應屬性, 所以還得按原來的方法來訪問和設置，以達到兼容各類瀏覽器的效果
以下例：
document.getElementByIdx_x_xx(‘元素ID屬性值’).class
document.getElementByIdx_x_xx(‘元素ID屬性值’).style.color
document.getElementByIdx_x_xx(‘元素ID屬性值’).onclick
document.getElementByIdx_x_xx(‘元素ID屬性值’).class="classname"
document.getElementByIdx_x_xx(‘元素ID屬性值’).style.color="colorname"
document.getElementByIdx_x_xx(‘元素ID屬性值’).onclick= function(){alert(‘函數內容’)}

3.在FireFox中，本身定義的屬性必須用getAttribute()方法獲取，不能像在IE下直接獲取
解決辦法：統一用getAttribute()方法獲取

4.img標籤具備title和alt兩個屬性，title用做圖片的tip說明，alt用在圖片不存在或加載失敗時的提示；在IE中若未定義title則alt也承擔了title的做用，但在FireFox則各司其職；所以爲保證瀏覽器兼容最好各盡其用

5.IE中要操做某個節點(Node)的class要用」classname」作爲屬性名來設置或取得，FireFox和其它瀏覽器用」class」作爲屬性名來設置或取得

6.設置某個節點(Node)的style,若是用」style」作爲屬性名其它瀏覽器都能解析，但IE會忽略；若是用」cssText」作爲屬性名其它瀏覽器都能解析，但Opera會忽略;通用代碼以下：
var oStyle = oNode.getAttribute("style");
if(oStyle == "[object]"){
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
}else{
oNode.setAttribute("style", strStyle);
}

(三) DOM事件(event)的使用：
1.IE下通常用document.body.onload = onload_func這樣的方法註冊onload響應事件函數，其中function onload_func()在這以前已經被實現，可是在FireFox下卻沒法執行; FireFox下通常用document.body.onload = onload_func()這樣的方法。
解決辦法：都採用window.onload = onload_func這種方法;或者都採用document.body.onload = new Function('onload_func'); 或者都採用document.body.onload = function(){}。(注意Function與function的區別)

2.FireFox的event只能在事件發生的現場使用，此問題暫沒法解決。能夠這樣變通：

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

新代碼(可在IE和FireFox中運行)：
<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中運行，但不會報錯。

3.在IE中，event對象有x、y兩屬性，FireFox中沒有;相對的在FireFox中，event對象有pageX、pageY兩屬性，IE中沒有。
解決辦法：用event.clientX、event.clientY代替，缺陷是在頁面中存在滾動條時與pageX、pageY有細微差異；或者用以下方法代替：
pgX = event.x ? event.x : event.pageX;
pgY = event.y ? event.y : event.pageY;
可取得無差異數值。

4.在IE中event對象有srcElement屬性,可是沒有target屬性; 在Firefox中event對象有target屬性,可是沒有srcElement屬性
解決辦法：用obj = event.srcElement ? event.srcElement : event.target;來代替IE下的event.srcElement或者Firefox下的event.target,請同時注意event的兼容性問題。

5.添加事件捕獲 IE中：obj.setCapture()、obj.releaseCapture()
FireFox中：document.addEventListener( "mousemover",mousemovefunction,true);
document.removeEventListener( "mousemove ",mousemovefunction,true);

6.禁止選取網頁內容 IE中用JS：obj.OnSelectStart=function(){return false;}
FireFox中用CSS：-moz-user-select:none

(四) JS的語法兼容性：
1.在FireFox中可使用與HTML節點對象ID屬性值相同的JS變量名稱，可是IE中不行。
解決辦法：在命名上區分HTML節點對象ID屬性值和JS變量

2.IE不支持JS的const,沒法定義JS常量
解決辦法：所有用var定義爲變量

3.在JS中書寫URL地址字符串時&字符就直接寫爲「&」(去掉雙引號),不要寫「&」，不然容易出現URL識別不正常的錯誤

4.在IE中能夠經過showModalDialog和showModelessDialog打開模式和非模式窗口，FireFox下則不能
解決辦法：使用Window.Open方法。若是須要將子窗口中的參數傳遞迴父窗口，能夠在子窗口中使用Window.Opener屬性來訪問父窗口；若是須要父窗口控制子窗口的話，使用Var subWindow = Window.Open(pageURL,Name,Parameters); 來得到新開的窗口對象

5.在IE中向表格裏添加一行的方法insertRow()若是不指定參數，默認參數爲-1,將自動向Table中追加1行；在FireFox中必定要指定參數如-1,參數爲空會報錯

6.在IE中可使用new ActiveXObject()的方法實例化對象，如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");可是FireFox不支持ActiveXObject,只能經過這種方法如var xmlDom = new XMLHttpRequest();實例化對象

2、CSS兼容性：

1.CSS中幾種瀏覽器對不一樣關鍵字的支持，可進行瀏覽器兼容性重複定義

!important 可被FireFox和IE7識別
* 可被IE六、IE7識別
_ 可被IE6識別
*+ 可被IE7識別

2.IE專用的條件註釋

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

3.幾個瀏覽器對實際像素的解釋
IE/Opera：對象的實際寬度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：對象的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4.鼠標手勢問題：FireFox的cursor屬性不支持hand，可是支持pointer，IE兩個都支持；因此爲了兼容都用pointer

5.FireFox中設置HTML標籤的Style屬性時，全部位置、寬高和尺寸值必須後跟px，IE也支持此寫法，所以統一加px單位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

6.FireFox沒法解析簡寫的padding屬性設置，如padding 5px 4px 3px 1px；必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

7.消除ul、ol等列表的縮進時，樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效

8.CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6;

9.CSS控制圓角：IE：不支持圓角；
FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

10.CSS雙線凹凸邊框：IE：border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;

11.IE支持CSS方法cursor:url()自定義光標樣式文件和滾動條顏色風格；FireFox對以上二者均不支持

12.IE有Select控件永遠處於最上層的bug,且全部CSS對Select控件都不起做用

13.IE支持Form中的Label標籤，包括圖片和文字內容；FireFox不支持包含圖片的Label，點擊圖片不能讓標記 label for 的Radio或CheckBox產生效果

14.FireFox中的TextArea不支持onScroll事件

15.FireFox不支持display的inline和block

16.FireFox對Div設置margin-left, margin-right爲auto時已經居中, IE中不行

17.FireFox對Body設置text-align時, Div須要設置margin: auto(主要是margin-left margin-right) 方可居中

18.對超連接的CSS樣式設置最好聽從這樣的順序：L-V-H-A。即
<style type="text/css">

</style>
這樣能夠避免一些訪問事後的超連接就不具有hover和active樣式了

19.IE中設置長段落自動換行在CSS中設置word-wrap:break-word；FireFox中使用JS插入
的方法來實現，具體代碼以下：

20.在子容器加了浮動屬性後,該容器將不能自動撐開
解決方法：在標籤結束後下一個標籤中加上一個清除浮動的CSS clear:both;

21.浮動後IE6解釋外邊距爲實際邊距的雙倍
解決辦法：加上display:inline

22.IE6下圖片下方會有空隙
解決辦法：爲img加上display:block或設置vertical-align 屬性爲vertical-align:top | bottom |middle |text-bottom

23.IE6下兩個層中間有空隙
解決辦法：設置右側div也一樣浮動float:left或者相對IE6定義 margin-right:-3px;

24.LI中內容超過長度後以省略號的顯示方法
<style type="text/css">

</style>

25.將元素的高度和行高設爲相同值，便可垂直居中文本
<style type="text/css">

</style>

26.對齊文本與文本輸入框，須在CSS中增長vertical-align:middle;屬性設置
<style type="text/css">

</style>

27.支持WEB標準的瀏覽器設置了固定高度值就不會像IE6那樣被撐開，可是又想設置固定高度又想可以被撐開呢?解決辦法是去掉height屬性而設置min-height，爲了兼容不支持min-height的IE6能夠這樣定義：
{
height:auto!important;
height:200px;
min-height:200px;
}

28.web標準中IE沒法設置滾動條顏色
解決辦法：在CSS中對body的設置改成對html的
<style type="text/css">

</style>

29.IE6因爲默認行高問題沒法定義1px左右高度的容器，
解決辦法：在CSS中對容器設置如：overflow:hidden | zoom:0.08 | line-height:1px

30.給Flash設置透明屬性可以使層顯示在Flash之上
<param name="wmode" value="transparent" /> <!-- 解決IE上的問題 //>
<embed wmode="transparent" …… > <!-- 解決FireFox上的問題 //>

31.FireFox設置Padding屬性後會相應的增長Width和Height屬性值，IE不會
解決辦法：用!important方法多定義一套Height和Width

32.FireFox對div與div之間的空格是忽略的，但IE是處理的；所以儘可能在兩個相連的div之間不要有空格和回車，不然可能會形成不一樣瀏覽器之間格式不正確，好比著名的3px誤差；並且緣由很難查明

33.形如以下格式
<div id="parent">
<div id="content"> </div>
</div>
當Content內容多時，即便parent設置了高度100%或auto,在不一樣瀏覽器下仍是不能無缺的自動伸展；解決辦法在層的最下方產生一個高度爲1的空格,代碼以下
<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

34.IE和FireFox對字體small的尺寸解釋不一樣，FireFox爲13px,IE中爲16px

35.IE和FireFox對空格的尺寸解釋不一樣，FireFox爲4px,IE中爲8px

36.CSS的float屬性：

IE下：document.getElementByIdx_x("idname").style.styleFloat="float";

FF下：document.getElementByIdx_x("idname").style.cssFloat="float";