关于浏览器兼容
关于浏览器兼容性问题
1.主要的浏览器内核
webkit浏览器（chrome，360等），firefox浏览器，opera浏览器，IE浏览器（IE9前后的区别，很关键）
（后面的浏览器可以不记住内核名称）
2.浏览器版本检测
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[/: ]([d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
if(/webkit/.test(userAgent)){
console.log("safari 浏览器");
}
if(userAgent.indexOf("webkit")>-1){
console.log("safari 浏览器");
}
http://www.jb51.net/article/31729.htm
http://www.jb51.net/article/50464.htm
3.IE的兼容模式
IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式：
Compatible（兼容的）
http://www.jb51.net/css/88637.html
4.IE的怪异模式
在ie6，ie7，ie8下，如果不声明DOCTYPE，在会触发怪异模式（quirks 模式）。
怪异模式是老版本，怪异模式通常模拟老式浏览器（比如Microsoft IE4 和Netscape Navigator4）的解析模式。
http://www.jb51.net/css/384176.html
5.IE8（及之前）浏览器事件绑定方式的不同
添加事件
//w3c标准
addEventListener(type, listener, useCapture);
//低版本的ie浏览器
attachEvent(type, listener);
删除事件
//w3c标准
removeEventListener(event,function,capture/bubble);
//低版本的ie浏览器
detachEvent(event,function);
解决方案：使用jquery库（jQuery 2.0以前的版本）
6.ie7（及之前）的浏览器不支持png半透明效果
解决方案：使用滤镜实现或者做降级处理
7.IE8（及之前）的浏览器不支持H5和CSS3，IE9对H5和css3支持不全。
解决方案：降级处理
8.CSS3属性前缀问题
大部分主流浏览器支持W3C标准写法，部分浏览器（个别android手机浏览器）不支持W3C标准写法，需要加前缀，前缀包括-webkit -o -ms -moz
9.关于降级处理
在不支持h5和css3的浏览器上通过其他替代方案，或者不进行实现，给用户以友好的提示，但是要尽量保证页面的美观和功能的完整性。
10.ajax的实现
w3c使用XMLHttpRequest , IE8（及之前）浏览器中使用ActiveXObject
11. ie各个版本hack
/*类内部hack：*/
.header {_100px;} /* IE6专用*/
.header {*+100px;} /* IE7专用*/
.header {*100px;} /* IE6、IE7共用*/
.header {100px ;} /* IE8、IE9共用*/
.header {100px9;} /* IE6、IE7、IE8、IE9共用*/
.header {330px9 ;} /* IE9专用*/
/*选择器Hack：*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/