做前端的小伙伴無論在學習還是工作中助析，應(yīng)該還是或多或少會遇到點IE兼容問題昙沦，當然我們巴不得IE的份額越來越低..（￣▽￣）
下面是我收集的一些常見方法哈雏，以作為自己學習的筆記嘁傀。
什么是瀏覽器兼容問題
同一份代碼兴蒸，有的瀏覽器效果正常，有的不正常
不正常的原因是什么细办？(不支持? bug橙凳？)
如何讓它展示正常?(條件注釋？ 單獨Hack笑撞？)
當然在做兼容之前岛啸，我們還是需要從實際項目出發(fā)考慮。
首先介紹兩個重要概念茴肥，漸進增強和優(yōu)雅降級
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構(gòu)建頁面值戳，保證最基本的功能，然后再針對高級瀏覽器進行效果炉爆、交互等改進和追加功能達到更好的用戶體驗
優(yōu)雅降級 (graceful degradation): 一開始就構(gòu)建完整的功能堕虹，然后再針對低版本瀏覽器進行兼容卧晓。
stackoverflow-漸進增強和優(yōu)雅降級的區(qū)別
那我們實際上用到哪一種，還是從實際（láo bǎn）要求出發(fā)
要不要做
產(chǎn)品的角度（產(chǎn)品的受眾赴捞、受眾的瀏覽器比例逼裆、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無必要做某件事)
做到什么程度
讓哪些瀏覽器支持哪些效果
具體如何做
1. 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
- ...
2. 條件注釋法
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼赦政。
還有個重點Ｊび睢！恢着！╮(╯﹏╰）╭IE10不再支持條件注釋
用法舉例
<!--[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从诲，對CSS的解析認識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣靡羡，得不到我們所需要的頁面效果系洛。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果略步。
CSS Hack大致有3種表現(xiàn)形式描扯，CSS屬性前綴法
、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack趟薄，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的绽诚。
- 屬性前綴法(即類內(nèi)部Hack)：
例如
IE6能識別下劃線"_"和星號" * "，
IE7能識別星號" * "杭煎，但不能識別下劃線"_"憔购，
IE6~IE10都認識"\9"，但firefox前述三個都不能認識
.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)
實際上面以及解釋過了
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
常見屬性的兼容情況
一些兼容處理例子
- 浮動
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
- inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
常用工具介紹
html5shiv.js
這個是用來支持html5標簽的
官方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.
詳細請戳上面
respond.js
這個是用來支持css3媒體查詢的
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
css reset岔帽、
css reset指清除某些默認樣式玫鸟，達到不同瀏覽器的統(tǒng)一效果，具體見上面介紹
normalize.css
流行的css reset實現(xiàn)方法
A modern alternative to CSS resets
Modernizr
Modernizr是一套JavaScript 庫犀勒，用來偵測瀏覽器是否支持HTML5與CSS3等規(guī)格屎飘。如果瀏覽器不支持，Modernizr會使用其他的解決方法來進行模擬贾费。
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
postCSS
這個用來后編譯你的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)站
caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法
以上~~~~
