框架選擇
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
常見瀏覽器兼容情況
- inline-block: >= IE8
- min-width/min-height: >= IE8
- :before/:after : >= IE8
- :hover : >= IE7
- background-size: >=IE9
- 圓角： >= IE9
- 陰影： >= IE9
- 動畫、漸變： >= IE10
1. 什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
2. 處理瀏覽器兼容問題的思路
- 要不要做
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度（有無必要做某件事）
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據兼容需求選擇技術框架/庫（jquery）
- 根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS
- 條件注釋、CSS Hack、js能力檢測做一些修補
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
3. 列舉5種以上瀏覽器兼容的寫法
兼容性寫法可參考borwserhacks
- IE條件注釋
<!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->
//在上述代碼中，只有IE7以下（含IE7），才能看到應用了test類的元素是紅色文本。
- IE屬性前綴
.selector{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6-7*/
color: yellow\9; /*ie/edge 6-8*/
}
- IE選擇器前綴：
*html{}/*ie6*/
*+html{}/*ie7*/
- 不同瀏覽器添加相應的屬性前綴：
column-count: 2;
-moz-column-count: 2;
-weblit-column-count: 2;
- 利用和兼容相關的開發工具如Modernizr
首先你下載完你自定義的腳本以后，你就可以像引用普通js文件一樣引用它了，然后就可以用了。
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個class（例如:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox）。下面這段代碼是運行在Chrome下的效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history
draganddrop websockets rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow textshadow opacity cssanimations
csscolumns cssgradients cssreflections csstransforms
csstransforms3d csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache
svg inlinesvg smil svgclippaths">
而在IE9里的效果是：
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
你還可以結合HTML5/CSS3特性一起使用
你可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應的屬性以便支持當前瀏覽器。例如，下面的代碼屬性，在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標準的邊框：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
因為如果瀏覽器支持box-shadows的話，Modernizr就會將boxshadow class添加到元素，然后你可以將它管理到一個相應的div的id上。如果不支持，Modernizr就會將no-boxshadow class添加到元素，這樣顯示的就是一個標準的邊框。這樣我們就可以很方便地在支持CSS3特性的瀏覽器上使用CSS3新功能，不支持的瀏覽器上繼續使用以前的方式。
4. 以下工具/名詞是做什么的
1. 條件注釋：
于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼；使用了條件注釋的頁面在IE9中可正常工作，但在IE10中無法正常工作，IE10不再支持條件注釋；
2. IE Hack：
針對IE瀏覽器編寫不同的CSS，讓IE能夠正常渲染的過程；
3. js 能力檢測：
瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測；
4. html5shiv.js：
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題；
5. respond.js：
Respond.js 是一個小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計；
6. css reset：
將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式，“覆蓋”瀏覽器的CSS默認屬性；
7. normalize.css：
Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一，在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性；
8. Modernizr：
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案；Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名；
9. postCSS：參考PostCSS
它可以被理解為一個平臺，可以讓一些插件在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我的自動生成兼容性代碼；
