IE和Firefox的Javascript兼容性总结
一、函数和方法差异

1. getYear()方法

【分析说明】先看一下以下代码：

var year= new Date().getYear();document.write(year);　

    在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因为在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值。

【兼容处理】

　　加上对年份的判断，如:

var year= new Date().getYear();year = (year<1900?(1900+year):year);document.write(year);　

　也可以通过 getFullYear getUTCFullYear 去调用:

var year = new Date().getFullYear();document.write(year); 

2. eval()函数

【分析说明】在IE中，可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象；Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。

【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。



3. const声明

【分析说明】在 IE 中不能使用 const 关键字。如：

const constVar = 32;

在IE中这是语法错误。

【兼容处理】不使用 const ，以 var 代替。



4. var

【分析说明】请看以下代码：

echo=function(str){ document.write(str);}pre>

　　这个函数在IE上运行正常，Firefox下却报错了。

【兼容处理】而在echo前加上var就正常了，这个就是我们提到var的目的。



5. const 问题

【分析说明】在 IE 中不能使用 const 关键字。如

const constVar = 32;

在IE中这是语法错误。

【解决方法】不使用 const ，以 var 代替。



二、样式访问和设置

1. CSS的"float"属性

【分析说明】Javascript访问一个给定CSS 值的最基本句法是：object.style.property，但部分CSS属性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同浏览器写法不同。

在IE中这样写：

document.getElementById("header").style.styleFloat = "left";

在Firefox中这样写：

document.getElementById("header").style.cssFloat = "left";

【兼容处理】在写之前加一个判断，判断浏览器是否是IE：

if(document.all){　　document.getElementById("header").style.styleFloat = "left";}else{　　document.getElementById("header").style.cssFloat = "left";} 

2. 访问<label>标签中的"for"

【分析说明】和"float"属性一样，同样需要使用不现的句法区分来访问<label>标签中的"for"。

在IE中这样写：

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("htmlFor");

在Firefox中这样写：

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("for");【

兼容处理】解决的方法也是先 判断浏览器类型。



3. 访问和设置class属性

【分析说明】同样由于class是Javascript保留字的原因，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。

IE8.0之前的所有IE版本的写法：

var myObject = document.getElementById("header");var myAttribute = myObject.getAttribute("className");

适用于IE8.0 以及 firefox的写法：

var myObject = document.getElementById("header");var myAttribute = myObject.getAttribute("class");

　　另外，在使用setAttribute()设置Class属性的时候，两种浏览器也存在同样的差异。

　

　setAttribute("className",value);

　　这种写法适用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"属性了。

　

　setAttribute("class",value);

适用于IE8.0 以及 firefox。

【兼容处理】

方法一，两种都写上：

var myObject = document.getElementById("header");myObject.setAttribute("class","classValue");myObject.setAttribute("className","classValue"); 

//设置header的class为classValue方法二，IE和FF都支持object.className，所以可以这样写：

var myObject = document.getElementById("header");myObject.className="classValue";//

设置header的class为classValue方法三，先判断浏览器类型，再根据浏览器类型采用对应的写法。



4. 对象宽高赋值问题

【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。

【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;