浏览器兼容性问题解决

1. 样式兼容性（css）方面

解决方法：可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，全局重置样式

2. firefox浏览器不支持cursor：hand显示手型

解决方法：统一使用cursor：pointer

3. IE9以下浏览器不能使用opacity

解决方法：Firefox/Chrome/Safari/Opera浏览器使用opacity,IE浏览器使用filter

4. web标准中IE无法设置滚动条颜色

解决办法：将body换成html

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

5. chrome默认会将小于12px的文本强制按照12px来解析

解决办法：给其添加属性：-webkit-text-size-adjust: none;

6. const问题，IE下，只能使用var关键字来定义常量

解决方法：统一使用var关键字来定义常量

7. 事件绑定

IE:dom.attachEvent();

其他浏览器：dom.addEventListener();

解决办法：

function addEventListener(obj,event,fn,boo){

if(obj.addEventListener){

obj.addEventListener(event,fn,boo);

}else if(obj.attachEvent){

obj.attachEvent('on' + event,fn);

}

}

8. 移除事件绑定

IE:dom.detachEvent();

其他浏览器：dom.removeEventListener();

解决办法：

function removeEventListener(obj,event,fn,boo){

if(obj.removeEventListener){

obj.removeEventListener(event,fn,boo);

}else if(obj.detachEvent){

obj.detachEvent('on' + event,fn);

}

}

9. innerText在IE中能正常工作，但在FireFox中却不行

解决方法:

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}