-------------------------------关于浏览器兼容性问题-------------------------------------------

关于浏览器兼容性问题

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 ) 
}; 

http://www.jb51.net/article/31729.htm

3.IE的兼容模式

IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会致使网页显示出问题，因而咱们一般在HTML中添加下列代码来使 IE 使用固定的渲染模式：

<metahttp-equiv="X-UA-Compatible"content="IE=8"><!--以IE8模式渲染--> <metahttp-equiv="X-UA-Compatible"content="IE=7"><!--以IE7模式渲染-->

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 {_width:100px;}            /* IE6专用*/

    .header {*+width:100px;}        /* IE7专用*/

    .header {*width:100px;}            /* IE6、IE7共用*/

    .header {width:100px\0;}        /* IE8、IE9共用*/

    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/

    .header {width:330px\9\0;}    /* IE9专用*/

/*选择器Hack：*/

    *html .header{}        /*IE6*/ 

    *+html .header{}    /*IE7*/