做前端的小伙伴無(wú)論在學(xué)習(xí)還是工作中，應(yīng)該還是或多或少會(huì)遇到點(diǎn)IE兼容問(wèn)題，當(dāng)然我們巴不得IE的份額越來(lái)越低..（￣▽￣）
下面是我收集的一些常見(jiàn)方法，以作為自己學(xué)習(xí)的筆記。

image.png

什么是瀏覽器兼容問(wèn)題

同一份代碼，有的瀏覽器效果正常，有的不正常

不正常的原因是什么？(不支持? bug？)
如何讓它展示正常?(條件注釋？ 單獨(dú)Hack？)

當(dāng)然在做兼容之前，我們還是需要從實(shí)際項(xiàng)目出發(fā)考慮。

首先介紹兩個(gè)重要概念，漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的區(qū)別

那我們實(shí)際上用到哪一種，還是從實(shí)際（láo bǎn）要求出發(fā)

image.png

要不要做

產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無(wú)必要做某件事)

做到什么程度

讓哪些瀏覽器支持哪些效果

具體如何做

1. 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)

• Bootstrap (>=ie8)
• jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
• Vue (>= ie9)
• ...

2. 條件注釋法

條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼。
還有個(gè)重點(diǎn)！?。〃r(╯﹏╰）╭IE10不再支持條件注釋

image.png

用法舉例

    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

3.CSS hack

由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。

CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法
、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。

• 屬性前綴法(即類內(nèi)部Hack)：
  例如
  IE6能識(shí)別下劃線"_"和星號(hào)" * "，
  IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線"_"，
  IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

• 選擇器前綴法(即選擇器Hack)

<style>
.test{ width:90px;}               /*IE 6,IE 7,IE 8*/
*html .test{ width:80px;}         /*only for IE 6*/
*+html .test{ width:70px;}        /*only for IE 7*/
</style>

• IE條件注釋法(即HTML條件注釋Hack)

實(shí)際上面以及解釋過(guò)了

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

常見(jiàn)屬性的兼容情況

image.png

一些兼容處理例子

• 浮動(dòng)

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對(duì)ie67有效 */
}

• inline-block

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

常用工具介紹

html5shiv.js
這個(gè)是用來(lái)支持html5標(biāo)簽的

官方github解釋：The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
詳細(xì)請(qǐng)戳上面

respond.js
這個(gè)是用來(lái)支持css3媒體查詢的

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

css reset、

css reset指清除某些默認(rèn)樣式，達(dá)到不同瀏覽器的統(tǒng)一效果，具體見(jiàn)上面介紹

normalize.css
流行的css reset實(shí)現(xiàn)方法

A modern alternative to CSS resets

Modernizr
Modernizr是一套JavaScript 庫(kù)，用來(lái)偵測(cè)瀏覽器是否支持HTML5與CSS3等規(guī)格。如果瀏覽器不支持，Modernizr會(huì)使用其他的解決方法來(lái)進(jìn)行模擬。

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

postCSS
這個(gè)用來(lái)后編譯你的css，讓你的css適配不同的客戶端

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

常用網(wǎng)站

瀏覽器市場(chǎng)份額

caniuse.com 查CSS屬性兼容

browserhacks 查 Hack 的寫法

以上~~~~

image.png