什么是瀏覽器兼容問題
同一份代碼括荡，有的瀏覽器效果正常疏遏，有的不正常
為什么會(huì)有瀏覽器兼容問題
- 同一產(chǎn)品，版本越老 bug 越多
- 同一產(chǎn)品目养，版本越新俩由，功能越多
- 不同產(chǎn)品，不同標(biāo)準(zhǔn)癌蚁，不同實(shí)現(xiàn)方式
處理兼容問題的思路
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾幻梯、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度（有無(wú)必要做某件事）
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)（jquery）
- 根據(jù)兼容需求選擇兼容工具（html5shiv.js努释、respond.js碘梢、css reset、normalize.css伐蒂、Modernizr）
- postCSS
- 條件注釋煞躬、CSS Hack、js能力檢測(cè)做一些修補(bǔ)
漸進(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）：一開始就構(gòu)建完整的功能缕减，然后再針對(duì)低版本瀏覽器進(jìn)行兼容雷客。
處理兼容問題的手段
合適的框架
- Bootstrap (>=ie8)
- jQuery 1 (>=ie6), jQuery2 (>=ie9)
- Vue (>=ie9)
- ...
條件注釋
條件注釋(conditional comment)是于HTML源碼中被IE有條件注釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼烛卧。
<!--[if IE 6]>//如果是IE6佛纫，下面的<p>生效
<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]-->
使用了條件注釋的頁(yè)面在Windows Internet Explorer 9 中可以正常工作，但在 Internet Exploroer 10中無(wú)法正常工作总放。
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í)
- 選擇器法前綴（即選擇器Hack）
- IE條件注釋法（即HTML條件注釋Hack）:針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 堕义，針對(duì)IE6及以下版本：。這類Hack不僅對(duì)CSS生效脆栋，對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效
常見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
常見兼容處理范例
.target{
display: inline-block;
*display: inline;
*zoom: 1; //生成一個(gè)類似BFC的效果倦卖，可以添加寬高，相當(dāng)于inline-block
}
常見兼容處理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對(duì)ie67有效 */
}
常見兼容處理范例
<!--[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]-->
需要用到的網(wǎng)站
- 瀏覽器市場(chǎng)份額
- caniuse.com查CSS屬性兼容
- browserhacks查Hack的寫法
- 參考文章
