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



三、DOM方法及对象引用

1. getElementById

【分析说明】先来看一组代码：

<!-- input对象访问1 --><input id="id" type="button" value="click me" ōnclick="alert(id.value)"/>
　　在Firefox中，按钮没反应，在IE中，就可以，因为对于IE来说，一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用，而Firefox中不可以。

【兼容处理】尽量采用W3C DOM 的写法，访问对象的时候，用document.getElementById("id") 以ID来访问对象，且一个ID在页面中必须是唯一的，同样在以标签名来访问对象的时候，用document.getElementsByTagName("div")[0] 。该方式得到较多浏览器的支持。

<!-- input对象访问2 --><input id="id" type="button" value="click m