什么是瀏覽器兼容問題
同一份代碼，有的瀏覽器效果正常，有的不正常
不正常的原因是什么？(不支持? bug？)
1，瀏覽器不支持這個(gè)，比如用了一個(gè)瀏覽器不支持的框架
2，比如新的屬性，IE7不支持
3，比如有一個(gè)展示不正常，有bug
如何讓它展示正常?(條件注釋？ 單獨(dú)Hack？)
為什么會(huì)有瀏覽器兼容問題
同一產(chǎn)品，版本越老 bug 越多:最典型的就是IE6，現(xiàn)在一般是IE11了，很多屬性，低版本的瀏覽器不兼容
同一產(chǎn)品，版本越新，功能越多：對(duì)于新的特性，老的瀏覽器不支持
不同產(chǎn)品，不同標(biāo)準(zhǔn)，不同實(shí)現(xiàn)方式：IE，chrome，F(xiàn)irefox等等，后老出現(xiàn)了W3C標(biāo)準(zhǔn)
用到的網(wǎng)站
瀏覽器市場(chǎng)份額：http://#baidu.com/data/browser
caniuse.com 查CSS屬性兼容：http://caniuse.com
browserhacks 查 Hack 的寫法：http://browserhacks.com/
處理兼容問題的思路
說白了就是要兼容到幾，兼容到，IE8，IE7，IE6？
要不要做
產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無必要做某件事)
做到什么程度
讓哪些瀏覽器支持哪些效果。比如IE6,7jquery就好些
如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js（用HTML5的標(biāo)簽寫的，模擬低瀏覽器版本的標(biāo)簽）、
respond.js（響應(yīng)式，媒體查詢，可以模擬出來）、css reset（去除瀏覽器默認(rèn)樣式）、
normalize.css、Modernizr)
postCSS：寫屬性的時(shí)候不要考慮版本和寫前綴，寫好后，自動(dòng)加前綴。
條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，
然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí) (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的區(qū)別
http://stackoverflow.com
合適的框架
Bootstrap (>=ie8) http://www.bootcss.com/
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
...
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。
條件注釋可被用來向IE提供及隱藏代碼。只有IE6,7,8,9才能識(shí)別這種規(guī)范，對(duì)于其他瀏覽器就是個(gè)注釋
<!--[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]-->
使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，
但在 Internet Explorer 10 中無法正常工作。 IE10不再支持條件注釋
條件注釋
項(xiàng)目 范例 說明
！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，
或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，
因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSS hack
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í)
選擇器前綴法(即選擇器Hack)
IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)：
<!--[if IE]>IE瀏覽器顯示的內(nèi)容 <![endif]-->，針對(duì)IE6及以下版本：<!--[if lt IE 6]>
只在IE6-顯示的內(nèi)容 <![endif]-->。這類Hack不僅對(duì)CSS生效，對(duì)寫在判斷語句里面的所有代碼都會(huì)生效
IE Hack：針對(duì)IE瀏覽器編寫不同的CSS，使得在IE瀏覽器中也能得到我們想要的頁面效果
- js 能力檢測(cè)：使用JS檢測(cè)瀏覽器是否支持特定的功能來確定解決方案
常見hack寫法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
常見屬性的兼容情況
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動(dòng)畫/漸變: >= ie10
常見兼容處理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對(duì)ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
一些和兼容相關(guān)的開發(fā)利器
html5shiv.js
https://github.com/aFarkas/html5shiv
respond.js（CSS3響應(yīng)式，媒體查詢）
https://github.com/scottjehl/Respond
CSS Reset
https://segmentfault.com/a/1190000003021766
normalize.css:保護(hù)默認(rèn)價(jià)值，修復(fù) bug,
https://github.com/necolas/normalize.css
Modernizr
https://github.com/Modernizr/Modernizr
https://segmentfault.com/a/1190000003820989
如何調(diào)試?yán)系粞赖?IE
安裝虛擬機(jī)
給元素添加border
