-------------------------------關於瀏覽器兼容性問題-------------------------------------------

關於瀏覽器兼容性問題

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*/