常见的浏览器兼容性问题

常见的浏览器兼容性问题

以下列举出的问题，仅存在于IE与非IE浏览器之间。实际开发中，遇到的兼容性问题将比以下列出的多得多，它不仅存在于IE与非IE浏览器之间，也存在于不同厂家以及不同版本的浏览器之间。要解决好浏览器的兼容性问题，更多的需要依赖于在开发中不断总结，不断积累经验或者通过第三方库解决。

一、向table中追加tr时，别忽略了tbody

//有如下html结构
<table id="myTable"> 
	<tbody id="myTableBody"></tbody> 
</table>


//非IE浏览器下添加tr
var cell=document.createElement("td").appendChild(document.createTextNode("foo")); 
vat row=document.createElement("tr").appendChild(cell); 
document.getElementByld("myTable").appendChiid(row); 


//IE浏览器下添加tr
var cell=document.createElement("td").appendChild(document.createTextNode("foo")); 
vat row=document.createElement("tr").appendChild(cell); 
document.getElementByld("myTableBody").appendChiid(row); 


//兼容性代码：
var cell=document.createElement("td").appendChild(document.createTextNode("foo")); 
vat row=document.createElement("tr").appendChild(cell); 
document.getElementByld("myTableBody").appendChiid(row); 

※注意：寻找tbody节点时，最好直接通过id的方式找到节点，不能使用遍历table的子节点的方式选择tbody节点。因为对不同浏览器，取table的子节点，结果不同。IE认为table元素的子节点为tbody，而其他浏览器则认为table元素的子节点为tr。

二、设置元素的样式

//非IE浏览器：
var spanElement = document.getElementById("mySpan"); 
spanElement.setAttribute("style", "font-weight:bold; color:red;"); 


//IE浏览器：
var spanElement = document.getElementById("mySpan"); 
spanElement.style.cssText = "font-weight:bold; color:red;"; 


//兼容性代码：
var spanElement = document.getElementById("mySpan"); 
spanElement.setAttribute("style", "font-weight:bold; color:red;"); 
spanElement.style.cssText = "font-weight:bold; color:red;"; 

三、设置元素的class属性

//非IE浏览器
var element = document.getElementById("myElement"); 
element.setAttribute("class", "styleC1ass"); 


//IE浏览器
var element = document.getElementById("myElement"); 
element.setAttribute("className", "styleC1ass"); 


//兼容性代码
var element = document.getElementById("myElement"); 
element.setAttribute("class", "styleClass"); 
element.setAttribute("className", "styleC1ass"); 

四、创建editor元素时，考虑到浏览器兼容性，应该遵循如下创建顺序

创建元素后，应确保正确设置元素的属性（特别是type属性）后，再把它增加到父元素中。因为在某些浏览器中，只有创建了元素，而且正确地设置了type属性时，才会把新创建的元素增加到其父元素中。

//错误的创建顺序
var button = document.createElement("input"): 
document.getElementById("formElement").appendChild(button); 
button.setAttribute("type", "button");


//正确的创建顺序
var button = document.createElement("input"): 
button.setAttribute("type", "button"); 
document.getElementById("formElement").appendChild(button); 


//顺便提下，当dom节点的插入顺序不当时，在IE下会导致内存泄漏,如下：
var hostElement = document.getElementById("hostElement");
var parentDiv = document.createElement("<div οnclick='foo()'>");
var childDiv = document.createElement("<div οnclick='foo()'>");


//错误的插入顺序
parentDiv.appendChiid(childDiv);
hostElement.appendChiid(parentDiv);


//正确的插入顺序
hostElement.appendChiid(parentDiv);
parentDiv.appendChiid(childDiv);

五、给dom对象绑定事件

方式一、直接给对象（object）添加事件属性

//非IE浏览器
domObj.setAttribute( 'onclick', 'callFunction( event, param );' ); 


//IE浏览器
 domObj.onclick = function(){ callFunction( event, param ); }; 


//兼容性解决方法
 domObj.onclick = function(){ callFunction( event, param ); };

※这种事件兼容性绑定方式适合于对静态dom元素绑定事件。

方式二、添加 listener 给 DOM 节点。其优势在于，对同一个 event 可以有多个 event listener，且适合于动态dom

//非IE浏览器
domObj.addEventListener( 'onclick', 'callFunction' ,false); 
domObj.removeEventListener( 'onclick', 'callFunction' ,false); 

//IE浏览器
domObj.attachEvent('onclick', 'callFunction') ;
domObj.detachEvent('onclick', 'callFunction') ;


//兼容性代码(摘录自Dean Edwards的版本，个人觉得这个实现比较牛)
function addEvent(element, type, handler) {
    //为每一个事件处理函数分派一个唯一的ID
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    //为元素的事件类型创建一个哈希表
    if (!element.events) element.events = {};
    //为每一个"元素/事件"对创建一个事件处理程序的哈希表
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        //存储存在的事件处理函数(如果有)
        if (element["on" + type]) {
            handlers[0] = element["on" + type];
        }
    }
    //将事件处理函数存入哈希表
    handlers[handler.$$guid] = handler;
    //指派一个全局的事件处理函数来做所有的工作
    element["on" + type] = handleEvent;
};
//用来创建全局唯一的ID计数器
addEvent.guid = 1;


function removeEvent(element, type, handler) {
    //从哈希表中删除事件处理函数
    if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
    }
};


function handleEvent(event) {
    var returnValue = true;
    //抓获事件对象(IE使用全局事件对象)
    event = event || fixEvent(window.event);
    //取得事件处理函数的哈希表的引用
    var handlers = this.events[event.type];
    //执行每一个处理函数
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
};
//为IE的事件对象添加一些“缺失的”函数
function fixEvent(event) {
    //添加标准的W3C方法
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
};
fixEvent.preventDefault = function () {
    this.returnValue = false;
};
fixEvent.stopPropagation = function () {
    this.cancelBubble = true;
};

六、创建radio按钮需考虑兼容性

//非IE浏览器
var radioButton = document.createElement("input"); 
radioButton.setAttribute("type", "radio"); 
radioButton.setAttribute("name", "radioButton"); 
radioButton.setAttribute("checked", "checked"); //在IE下，checked不被设置
//注：这种方法在IE下可以创建radio，但是radio无法选中。


//IE浏览器
var radioButton = document.createElement("<input type='radio' name='radioButton' checked='checked' />"); //非IE浏览器下，这段代码会抛异常


//兼容性代码
if (document.uniqueID) { //uniqueID属性为IE扩展属性，非W3C标准，因此可以用于浏览器检测
    //IE
    var radioButton = decument.createElement("<input type='radio' name='radioButton' checked='checked'>");
} else {
    //非IE
    var radioButton = document.createElement("input");
    radioButton.setAttribute("type", "radlo");
    radioButton.setAttribute("name", "radioButton");
    radioButton.setAttribute("checked", "checked");
}

七、创建Ajax需考虑兼容性

IE和非IE浏览器创建Ajax方式各不相同，需要根据不同浏览器调用不同的创建方式，github上已有很多开源项目对此操作进行了封装，可以到github或google源码上搜索。

八、Drag & Drop 事件的兼容性

IE，Firefox 都支持 drag 和 drop 事件。除了跟 IE 一样支持注册事件到目标和源 element，Firefox 还支持注册 drop 事件到 document，这个事件将会在 drop 事件完成后被调用，而 IE 不支持此注册。
输入法事件
在 IE 下，输入过程将连续触发 keydown，keyup 事件，其中 keydown 得到的键值总是 229，keyup 事件可以得到正确键值。而在 Firefox 中，输入开始将依次触发 keydown，compositionstart 事件，输入法结束后依次触发 compositionend，keyup 事件，输入过程中不会收到 keydown/keyup 事件。

九、其他兼容性问题：如CSS white-space，其他一些css属性等

后记：过去，兼容性问题一直是困扰web开发人员的大难问题，特别是在自行创建框架的项目中。但从IE9开始，W3C标准逐步被纳入IE浏览器之中，到写此文章之时，已发布了IE11，至IE11为止，基本上IE已完成了对W3C标准的支持，弱化了ActiveX控件，提供了对HTML5和CSS3的支持。未来，随着浏览器厂商对HTML5和CSS3支持的不断完善，过去很多需要依赖于flash，java applet，activeX才能实现的功能将会被HTML5/CSS3技术所取代，web也将在前端发挥更重要作用，为用户提供更强大的功能和更好的体验。