JavaScript多瀏覽器相容

Javascript 多瀏覽器相容
一、document.formName.item(”itemName”) 問題
問題說明：IE下，可以使用document.formName.item(”itemName”) 或document.formName.elements["elementName"] ；Firefox下，只能使用document.formName.elements["elementName"]。
解決方法：統一使用document.formName.elements["elementName"]。
二、集合類別物件問題

問題說明：IE下，可以使用 () 或 [] 取得集合類別物件；Firefox下，只能使用 [ ]取得集合類別物件。
解決方法：統一使用 [] 取得集合類別物件。
三、自訂屬性問題
問題說明：IE下，可以使用取得常規屬性的方法來取得自訂屬性，也可以使用getAttribute() 取得自訂屬性；Firefox下，只能使用getAttribute() 取得自訂屬性。
解決方法：統一透過 getAttribute() 取得自訂屬性。
四、eval(”idName”)問題
問題說明：IE下，可以使用eval(”idName”) 或getElementById(”idName”) 來取得id 為idName的HTML物件；Firefox下，只能使用getElementById(” idName”) 來取得id 為idName 的HTML物件。
解決方法：統一使用 getElementById(”idName”) 來取得 id 為 idName 的HTML物件。
五、變數名與某HTML物件ID相同的問題
問題說明：IE下，HTML物件的ID可以作為document 的下屬物件變數名稱直接使用，Firefox下則不能；Firefox下，可以使用與HTML物件ID相同的變數名，IE下則不能。
解決方法：使用 document.getElementById(”idName”) 取代 document.idName。最好不要取HTML物件ID相同的變數名，以減少錯誤；在宣告變數時，一律加上var關鍵字，以避免歧義。
六、const問題
問題說明：Firefox下，可以使用const關鍵字或var關鍵字來定義常數；IE下，只能使用var關鍵字來定義常數。
解決方法：統一使用var關鍵字定義常數。
七、input.type屬性問題

問題說明：IE下 input.type 屬性為唯讀；但Firefox下 input.type 屬性為讀寫。
解決方法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然後在同樣的位置再插入一個新的input元素。
八、window.event問題
問題說明：window.event 只能在IE下運行，而不能在Firefox下運行，這是因為Firefox的event只能在事件發生的現場使用。
解決方法：在事件發生的函數上加上event參數，在函數體內(假設形參為evt)使用var myEvent = evt?evt:(window.event?window.event:null)
範例：

问题说明：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支持，最好不用。
十八、Table操作问题
问题说明：ie、firefox以及其它浏览器对于 table标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[注] 建议使用JS框架集来操作table，如JQuery。
十九、对象宽高赋值问题
问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + ‘px';
二十、setAttribute('style','color:red;')
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute('style','color:red')
而用object.style.cssText = ‘color:red;'(这写法也有例外)
最好的办法是上面种方法都用上，万无一失
二一、类名设置
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
或者直接 object.className='styleClass';
IE和FF都支持object.className。
二二、用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持
二三、建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement(””);
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

CSS 多浏览器兼容

1、DOCTYPE 影响 CSS 处理

2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width

3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式

4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

浏览器差异
1、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三項才能達到最終效果。

2、CSS透明問題

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[註] 最好兩個都寫，並將opacity屬性放在下面。

3、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;-moz-border-radius-bottomleft:4px;-moz- border -radius- bottomright:4px;。
[註] 圓角問題是CSS中的經典問題，建議使用JQuery框架集來設定圓角，讓這些複雜的問題留給別人去想吧。不過jQuery的圓角只看到支撐整個區域的圓角，沒有支援邊框的圓角，不過這個邊框的圓角可以透過一些簡單的手段來實現，下次有機會介紹下。

4、cursor:hand VS cursor:pointer

問題說明：firefox不支援hand，但ie支援pointer ，兩者都是手形指示。
解決方法：統一使用pointer。

5、字體大小定義不同

對字體大小small的定義不同，Firefox中為13px，而IE中為16px，差異挺大。

解決方法：使用指定的字體大小如14px。

並列排列的多個元素（圖片或連結）的div和div之間，程式碼中的空格和回車在firefox中都會被忽略，而IE中卻預設顯示為空格（約3px）。

6、CSS雙線凹凸邊框
IE：border:2px outset;。
FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8white;-moz-border-right-colors:#404040#808080;-moz-border-right-colors:#404040#808080;-moz-border-right-colors:#404040#808080;-moz-border-bottom-colors :#404040 #808080;

瀏覽器bug
1、IE的雙邊距bug

設定為float的div在ie下方設定的margin會加倍。這是一個ie6都存在的bug。

解：在這個div裡面加上display:inline;

例如：

#IamFloat{
float:left;
margin:5px; 10px*/
display:inline;/*IE下再理解為5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
play:inline; IE下再理解為5px*/
}

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

2、IE選擇符空格BUG
一個空格也可以使樣式失效。 請看下面一段程式碼：

對世界而言，你是一個人；但是對於某個人，你是他的整個世界。縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。

這段程式碼對

的首字樣式定義在IE6上看是沒有效果的（IE7沒測試），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter{font-size:300%}後，顯示就正常了。但是同樣的程式碼，在FireFox下看是正常的。照道理說，p:first-letter{font-size:300%}的寫法是沒錯的。那麼問題出在哪裡呢？答案是偽類中的連字符”-”。 IE有個BUG，在處理偽類時，如果偽類的名稱中帶有連字符”-”，偽類名稱後面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。