浏览器兼容
一、什么是瀏覽器兼容問題
同一份代碼，有的瀏覽器顯示效果正常，有的瀏覽器顯示不正常
二、為什么會有瀏覽器兼容問題
- 同一產品，版本越老 bug 越多
- 同一產品，版本越新，功能越多。老的瀏覽器還沒有這個功能，當然顯示有誤
- 不同瀏覽器，不同標準，不同效果。比如不同瀏覽器的內核都不一樣
三、用到的網站
1、caniuse.com 查CSS屬性兼容情況
2、browserhacks 查 Hack 的寫法
四、處理兼容問題的思路
- 1、要不要做
產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
成本的角度 (有無必要做某件事)
- 2、做到什么程度
讓哪些瀏覽器支持哪些效果
- 3、如何做
（1）根據兼容需求選擇技術框架/庫(jquery)
（2）根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
（3）條件注釋、CSS Hack、js 能力檢測做一些修補
五、漸進增強和優雅降級
漸進增強(progressive enhancement):
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級 (graceful degradation):
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
六、處理兼容問題的方法
1、選擇合適的框架
（1）Bootstrap (>=ie8)
（2）jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
（3）Vue (>= ie9)
（4）react(兼容ie8)
不同的框架兼容的瀏覽器不一樣，在開發之前需要留意一下
2、條件注釋（又叫IE條件注釋）
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
<!--[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不再支持條件注釋
3、CSS hack
（1）起因：由于不同廠商的瀏覽器（比如Internet Explorer,Safari,Mozilla Firefox,Chrome等），或者是同一廠商的瀏覽器的不同版本（如IE6和IE7），對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
我們需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
（2）CSS hack表現形式
hack（黑客）利用不同瀏覽器的bug，來實現瀏覽器的兼容問題
CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack
- 屬性前綴法(即類內部Hack)
例如 IE6能識別下劃線_和星號* ，
IE7能識別星號*，但不能識別下劃線_，
IE6~IE10都認識"\9"，但firefox前述三個都不能認識
這些都是ie的bug，我們可以通過這些bug來識別ie的 版本
.box{color: red;_color: blue; /*ie6*/*color: pink; /*ie67*/color: yellow\9; /*ie/edge 6-8*/ }- 選擇器前綴法(即選擇器Hack)
- IE條件注釋法(即HTML條件注釋Hack)
針對所有IE(注：IE10+已經不再支持條件注釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->;
針對IE6及以下版本：<!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效
(3)舉個栗子
.target{display: inline-block;//inline-block在ie以上才支持*display: inline; //設置它為inline元素*zoom: 1;//是ie67比較老的功能，可以觸發ie的haslayout，生成類似bfc的效果 } .clearfix:after{content: '';display: block;clear: both; } .clearfix{*zoom: 1; /* 僅對ie67有效，可以用來清除浮動*/ }總結：css hack 就是為了將某些功能兼容ie的低版本，換了一種寫法來實現功能。然后利用ie的bug，通過*或者_來執行一些只有低版本ie能識別的代碼。
<!DOCTYPE html> <!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]--> //如果是移動端的，增加一個iem7的class <!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]--> //如果是小于ie7，增加一個ie6的class <!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]--> //如果是ie7，增加一個ie7的class <!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]--> // 如果是ie7，增加一個ie7的class <!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->可以如圖去使用class。就像給不同ie瀏覽器添加class屬性，通過.class來選中某個瀏覽器，對應的給它添加一些功能。就不用通過瀏覽器的bug來選擇ie瀏覽器了。
七：常見css屬性的兼容情況
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動畫/漸變: >= ie10
八：處理兼容的開發工具
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
這是處理兼容思路的轉變，之前處理兼容處理的是瀏覽器。而Modernizr方法不關心瀏覽器，幫助探測瀏覽器是否支持某種新特性，也就是說Modernizr只關心有沒有對應的css特性。
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性
詳情見文檔：Modernizr介紹文章
新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！
總結
- 上一篇： 用NFS挂载root出现：NFS: fa
- 下一篇： 六月前端知识集锦（每月不可错过的文章集锦