1. 什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。CSS hack 就是這種情況下我們針對不同的瀏覽器去寫不同的CSS的一個過程，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
2. 談一談瀏覽器兼容的思路
- 要不要做
- 從產(chǎn)品的角度考慮（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 從成本的角度考慮 (有無必要做某件事)
- 做到什么程度
讓哪些瀏覽器支持哪些效果 - 如何做
- 根據(jù)兼容需求選擇技術框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS（一個工具，在寫CSS時不需要考慮不同瀏覽器的前綴，會自動幫你加前綴）
- 條件注釋、CSS Hack、js 能力檢測做一些修補
具體到實施順序又有：
- 漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優(yōu)雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
3. 列舉5種以上瀏覽器兼容的寫法
1.合適的框架
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
2.條件注釋：
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
條件注釋
3.CSS屬性前綴法：
這種方法就是在屬性前加上特定瀏覽器才能識別的前綴。
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie6,7/
color: yellow\9; /ie/edge 6-10/
}
4.選擇器前綴法
選擇器前綴法是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。
目前最常見的是
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
等等
5.使用工具
4. 以下工具/名詞是做什么的
-
條件注釋
是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
IE10不再支持條件注釋。 -
IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程。 -
js 能力檢測
檢測瀏覽器是否支持某種特定的能力，然后給出特定的解決方案。 -
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題。 -
respond.js
Respond.js 是一個小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現(xiàn)響應式網(wǎng)頁設計。 -
css reset
早期的CSS Reset的作用就是清除所有瀏覽器默認樣式，這樣更易于保持各瀏覽器渲染的一致性。暴力清零帶來的問題：
1.*{ margin:0; padding:0; }會帶來性能問題
2.使用通配符存在隱性問題
3.過渡的標簽重置等于畫蛇添足
4.過渡的標簽重置導致語言元素失效 -
normalize.css
是一個可定制的 CSS 文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標準；是在現(xiàn)代瀏覽器環(huán)境下對于CSS reset的替代。
該項目依賴于研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。相比于傳統(tǒng)的CSS Reset，Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。
作用：
1.保護有用的瀏覽器默認樣式而不是完全去掉它們
2.為大部分HTML元素提供一般化的樣式
修復瀏覽器自身的bug并保證各瀏覽器的一致性
3.用一些小技巧優(yōu)化CSS可用性
4.用注釋和詳細的文檔來解釋代碼 -
Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。 -
postCSS
它可以被理解為一個平臺，可以讓一些插件在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發(fā)一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我的自動生成兼容性代碼。
