1. 什么是 CSS hack
Hack是針對不同瀏覽器去寫不同的CSS樣式嫡丙，從而讓各瀏覽器能達到一致的渲染效果资铡，那么針對不同的瀏覽器寫不同的CSS CODE的過程就叫做CSS Hack。然后將Hack放在瀏覽器特定的CSS文件中，讓符合條件的瀏覽器去解析這些代碼，符合條件的就解析袖外，不符合的就不解析，從而達到所需要的頁面渲染效果魂务÷椋總的一句話來說就是使用CSS Hack將會使你的CSS代碼部分失去作用，然后借助條件樣式粘姜，使用其原CSS代碼在一些瀏覽器解析鬓照，而CSS Hack代碼在符合條件要求的瀏覽器中替代原CSS那部分代碼。
2.談一談瀏覽器兼容的思路
主要從三個方面去考慮：
- 要不要去做孤紧？
主要從產(chǎn)品的角度和成本的角度去考慮颖杏；產(chǎn)品的角度來說我們要考慮清楚產(chǎn)品的使用群體，以及受眾的瀏覽器比例坛芽，從中分析我們需要效果優(yōu)先還是功能優(yōu)先留储。從成本的角度分析，就是我們做某個功能值不值得咙轩，有沒有必要获讳，付出和收獲是否不成比例。 - 如果做活喊，做到什么程度丐膝？
具體到需要讓那些瀏覽器支持哪些效果，在不同的瀏覽器側(cè)重點也不同钾菊。
例如：漸進增強和優(yōu)雅處理帅矗。
漸進增強是指針對低版本瀏覽器進行頁面構(gòu)建，保證最基本的功能煞烫，在這基礎(chǔ)上補充一些高級瀏覽器的效果浑此，功能，交互滞详；
優(yōu)雅降級：針對高級瀏覽器凛俱，構(gòu)建完整的功能紊馏，再針對低版本的瀏覽器去做一些兼容。 - 如何去做蒲犬？
根據(jù)兼容的需求選擇不同的技術(shù)或框架（比如jQuery） - Bootstrap;
- jQuery 1.~(>=ie6),jQuery 2.~(>=ie9);
- Vue(>=ie9);
- ....
根據(jù)兼容需求選擇兼容工具(html5shiv.js , respond.js , css.reset , normalize.css , Modernizr)
postCSS
條件注釋 CSS Hack js能力檢測做一些修補朱监。
3.列舉5種以上瀏覽器兼容的寫法
條件注釋：
<!--[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]-->
| 項目 | 范例 | 說明 |
| :------: | :------: |
| ! | [if !IE] | 非IE |
| lt | [if lt IE 5.5] | 小于IE 5.5 |
| lte | [if lte IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| 或| [if (IE 6)或(IE 7)] | IE6或者IE7 |
CSS Hack:
CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法原叮、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack赫编，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
常見的Hack寫法：
.box{
//屬性前綴法
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
//選擇器前綴法
.ie7 .clearfix{
zoom: 1;
}
//IE條件注釋法
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
屬性兼容問題：
常見的屬性兼容情況如下：
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動畫/漸變: >= ie10
常見處理范例如下：
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
4.以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句奋隶。條件注釋可被用來向IE提供及隱藏代碼擂送。（IE10不再支持條件注釋）。 - IE Hack
專門準對IE瀏覽器不同版本間的兼容性問題的處理达布，使之能夠渲染出想要的效果团甲。 - js 能力檢測
是指js中兼容性問題的一些封裝逾冬。通過js封裝函數(shù)或?qū)ο髞斫鉀Q瀏覽器的兼容問題黍聂。 - html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導(dǎo)致CSS不起作用的問題身腻。使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽产还。利用腳本document.createElement(“”)創(chuàng)建對應(yīng)的腳本，CSS選擇器便可正確應(yīng)用到該標簽嘀趟。 - respond.js
Respond.js 是一個快速脐区、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性她按，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計牛隅。（Responsive Web Design） - css reset
HTML標簽在瀏覽器中都有默認的樣式，例如p標簽有上下邊距酌泰，strong標簽有字體加粗樣式等媒佣。不同瀏覽器的默認樣式之間存在差別，例如ul默認帶有縮進樣式陵刹，在IE下默伍，它的縮進是由margin實現(xiàn)的，而在Firefox下卻是由padding實現(xiàn)的衰琐。開發(fā)時瀏覽器的默認樣式可能會給我們帶來多瀏覽器兼容問題也糊，影響開發(fā)效率。解決方法其中之一是開始就將瀏覽器的默認樣式全部覆蓋掉羡宙，這就是CSS reset狸剃。 - normalize.css
Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一狗热。- 它可以保留有用的默認值捕捂，不同于許多 CSS 的重置
- 標準化的樣式瑟枫，適用范圍廣的元素。
- 糾正錯誤和常見的瀏覽器的不一致性指攒。
- 一些細微的改進慷妙，提高了易用性。
- 使用詳細的注釋來解釋代碼允悦。
- Modernizr
Modernizr是一個檢測用戶瀏覽器HTML5和CSS3能力的JavaScript庫膝擂。Modernizr在頁面加載時快速運行來檢測功能；之后它會創(chuàng)建一個保存檢測結(jié)果的JavaScript對象隙弛，然后為你頁面中的html標簽上添加一系列class屬性來接通你的CSS架馋。
Modernizr支持大量的測試和可選地包括YepNope.js來視情況加載外部的js和css資源。 - postCSS
PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具全闷，支持變量叉寂，混入，未來 CSS 語法总珠，內(nèi)聯(lián)圖像等等屏鳍。PostCSS是CSS變成JavaScript的數(shù)據(jù)，使它變成可操作局服。PostCSS是基于JavaScript插件钓瞭，然后執(zhí)行代碼操作。PostCSS自身并不會改變CSS淫奔，它只是一種插件山涡，為執(zhí)行任何的轉(zhuǎn)變鋪平道路。
