IE与Firefox/Chrome浏览器JavaScript兼容性差异详解

引言：浏览器标准未统一的现状

由于各浏览器厂商出于自身利益考量，至今HTML与JavaScript标准尚未完全统一。尽管日常开发中常用的JS框架已处理大部分兼容性问题，但开发者仍需了解不同浏览器间的JS行为差异。

事件对象获取差异

在Firefox和Chrome中，没有window.event对象，仅支持event对象；而IE仅支持window.event，其他主流浏览器两者均支持。因此，通用的事件处理函数写法通常为：function handle(e){e = e || event;}。

HTML元素属性访问

在IE浏览器中，支持通过el.name直接访问元素属性，同时也支持使用el.getAttribute(name)方法。

在Firefox和Chrome中，基本属性支持通过el.name访问，但其余属性仅支持使用el.getAttribute(name)方法获取。

自定义属性获取

在IE环境下，既可以通过获取常规属性的方法获取自定义属性，也可以使用getAttribute()方法；而在Firefox中，只能使用getAttribute()方法来获取自定义属性。

Ajax请求创建

在IE浏览器中，创建ActiveXObject对象的语法为：new ActiveXObject()。

在Firefox和Chrome浏览器中，创建XMLHttpRequest对象的语法为：new XMLHttpRequest()。

HTML元素属性访问（重复说明）

在IE浏览器中，支持通过el.name直接访问元素属性，同时也支持使用el.getAttribute(name)方法。

在Firefox和Chrome中，基本属性支持通过el.name访问，但其余属性仅支持使用el.getAttribute(name)方法获取。

innerText与textContent的使用

Firefox不支持innerText属性，而是支持textContent来实现类似功能，但textContent不考虑元素的display样式，因此与IE不完全兼容。若字符串中不包含HTML代码，也可使用innerHTML替代。

if(document.all){

document.getElementById('element').innerText = "mytext";

} else{

document.getElementById('element').textContent = "mytext";

鼠标指针位置计算

计算鼠标指针位置虽不常见，但在需要时，IE和Firefox的语法存在差异。以下代码展示了最基本且可能作为复杂事件处理一部分的实现，旨在解释其中的异同。需注意的是，相对于Firefox，IE的结果可能存在较大差异，且该方法本身存在缺陷。

在IE中，获取鼠标位置的写法如下：

var myCursorPosition = [0, 0];

myCursorPosition[0] = event.clientX;

myCursorPosition[1] = event.clientY;

在Firefox中，获取鼠标位置的写法如下：

var myCursorPosition = [0, 0];

myCursorPosition[0] = event.pageX;

myCursorPosition[1] = event.pageY;

可见区域与窗口大小获取

有时我们需要获取浏览器可视区域的大小，通常称为“可见区域”。

在IE中，获取可视区域大小的写法如下：

var myBrowserSize = [0, 0];

myBrowserSize[0] = document.documentElement.clientWidth;

myBrowserSize[1] = document.documentElement.clientHeight;

在Firefox中，获取可视区域大小的写法如下：

var myBrowserSize = [0, 0];

myBrowserSize[0] = window.innerWidth;

myBrowserSize[1] = window.innerHeight;

Alpha透明效果处理

这并非JavaScript语法问题，而是源于CSS的Alpha透明设置。当元素需要淡入或淡出效果时，需通过JavaScript访问CSS的Alpha透明设置来完成，通常在一个循环中执行。需要修改的JavaScript代码如下：

在IE中，设置Alpha透明的CSS写法为：

#myElement { filter: alpha(opacity=50); }

在Firefox中，设置Alpha透明的CSS写法为：

#myElement { opacity: 0.5; }

在IE中，通过JavaScript设置Alpha透明的写法为：

var myObject = document.getElementById("myElement");

myObject.style.filter = "alpha(opacity=80)";

在Firefox中，通过JavaScript设置Alpha透明的写法为：

var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";

CSS float值访问

访问给定CSS值的基本语法为：object.style.property，使用驼峰命名法替换带连接符的值。例如，访问ID为“header”的<div>的background-color值，语法如下：

document.getElementById("header").style.backgroundColor= "#ccc";

由于“float”是JavaScript保留字，不能使用object.style.float直接访问。在两种浏览器中，可采用以下方式：

在IE中，设置float属性的写法为：

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

在Firefox中，设置float属性的写法为：

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

元素推算样式获取

JavaScript可通过object.style.property语法方便地访问和修改外部CSS样式，但其限制在于只能获取已设置的行内样式或由JavaScript直接设定的样式，无法访问外部样式表。要获取元素的“推算”样式，可使用以下代码：

在IE中，获取推算样式的写法为：

var myObject = document.getElementById("header");

var myStyle = myObject.currentStyle.backgroundColor;

在Firefox中，获取推算样式的写法为：

var myObject = document.getElementById("header");

var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);

var myStyle = myComputedStyle.backgroundColor;

访问元素的class属性

"class"是JavaScript的保留字，在两个浏览器中访问“class”属性的语法如下：

在IE中，获取class属性的写法为：

var myObject = document.getElementById("header");

var myAttribute = myObject.getAttribute("className");

在Firefox中，获取class属性的写法为：

var myObject = document.getElementById("header");

var myAttribute = myObject.getAttribute("class");