1.什么是 CSS hack?
答：由于不同廠商的瀏覽器。比如IE庸推、Safari、Mozilla浇冰、Firefox贬媒、Chrome等，或者是同一廠商的瀏覽器的不同版本肘习，如IE6和IE7际乘，對CSS的解析認識完全不一樣，因此會導致生成的頁面效果不一樣漂佩，得不到我們所需要的頁面效果脖含。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果投蝉。簡單的說养葵，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然瘩缆，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果关拒。
2.談一談瀏覽器兼容的思路?
答：
處理兼容問題的思路如下：
要不要做：
● 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例庸娱、效果優(yōu)先還是基本功能優(yōu)先）
● 成本角度（有無必要做某件事）
做到什么程度：
● 讓哪些瀏覽器支持哪些效果
如何做：
● 根據(jù)兼容需求選擇技術(shù)框架着绊、庫（Jquery)
● 根據(jù)兼容需求選擇兼容工具（html5shiv.js、respond.js熟尉、css reset归露、normalize.css、Modernizr)
● postCSS
● 條件注釋斤儿、CSS Hack 靶擦、js能力檢測做一些補修
3.列舉5種以上瀏覽器兼容的寫法
答：
1.條件注釋法
IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對IE6及以下版本： 雇毫。這類Hack不僅對CSS生效玄捕，對寫在判斷語句里面的所有代碼都會生效。
只在IE下生效
只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->
非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]--> 只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->
非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->
2.屬性前綴法(即類內(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*/
}
3.選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}馍迄，IE7能識別+html .class{}或者*:first-child+html .class{}福也。
*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有效
等等
4.合適的框架
Bootstrap(>=ie8)
JQuery 1.~(>=ie6) 、JQuery 2.~(>=ie9)
Vue (>=ie9)
5.使用兼容工具
html5shiv.js ： 在IE6~8（不支持html5標簽）上模擬html5標簽
respond.js ： 在IE6~8（不支持css3）上模擬CSS3 Media Queries
CSS Reset和Normalize.css
Modernizr.js：他會為瀏覽器的html標簽生成一批的css的class名稱攀圈，標記當前瀏覽器支持和不支持的特性暴凑。我們利用html標簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式
4.以下工具/名詞是做什么的
1.條件注釋:條件注釋（conditional comment)是于HTML源碼中被IE有條件解釋的語句赘来。條件注釋可被用來向IE提供及隱藏代碼现喳。使用了條件注釋的頁面在IE9中可正常工作，但在IE10中無法正常工作犬辰。
2.IE Hack：針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
3.js 能力檢測:能力檢測的目標不是識別特定的瀏覽器嗦篱，而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何幌缝，只需確定瀏覽器是否支持特定的能力灸促，就可以給出相關(guān)的方案
4.html5shiv.js：用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題涵卵。所以我們在使用過程中浴栽，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持.還有一點需要注意轿偎，在頁面中調(diào)用html5.js文件必須添加在頁面的head元素內(nèi)吃度，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個js文件不能在頁面底部調(diào)用贴硫。
5.respond.js:是一個快速椿每、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性英遭，實現(xiàn)響應式網(wǎng)頁設計（Responsive Web Design）间护。
6.css reset:將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式挖诸≈撸“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉
7.normalize.css:是一個很小的CSS文件多律，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性痴突。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質(zhì)替代方案狼荞。
8.Modernizr:是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫辽装。 目前，通過檢驗瀏覽器對一系列測試的處理情況相味，Modernizr 可以檢測18項 CSS3 功能以及40多項關(guān)于HTML5 的功能拾积。 它比傳統(tǒng)檢測瀏覽器名稱（瀏覽器嗅探）的方式更為可靠。 一整套測試的執(zhí)行時間僅需幾微秒。 此外拓巧，Modernizr 網(wǎng)站通過定制腳本只對你感興趣的元素進行檢測斯碌，從而實現(xiàn)效率優(yōu)化。
9.postCSS:PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具肛度，支持變量傻唾，混入，未來 CSS 語法承耿，內(nèi)聯(lián)圖像等等冠骄。
PostCSS 包括 CSS 解析器，CSS 節(jié)點樹 API瘩绒，一個源映射生成器和一個節(jié)點樹 stringifier猴抹。
PostCSS是CSS變成JavaScript的數(shù)據(jù)带族，使它變成可操作锁荔。PostCSS是基于JavaScript插件，然后執(zhí)行代碼操作蝙砌。PostCSS自身并不會改變CSS阳堕，它只是一種插件，為執(zhí)行任何的轉(zhuǎn)變鋪平道路择克。
