1、什么是 CSS hack
由于不同的瀏覽器或同一瀏覽器的不同版本(IE6-IE11，Firefox，safari，chrome，Opera等)對CSS支持和展現的效果不一樣，
會在不同瀏覽器環境中展現不一致的頁面樣式和功能。
為了獲得統一的頁面效果，就需要針對不同的瀏覽器環境寫特定的CSS樣式，這個針對不同的瀏覽器環境寫不同的CSS code的過程稱為CSS hack。
2、談一談瀏覽器兼容的思路?
1、要不要做
首先看看有沒有必要實現瀏覽器兼容的，產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先
2、做到什么程度
讓哪些瀏覽器支持哪些效果
3、怎么做
根據兼容需求選擇技術庫和框架比如
bootstrap（>=ie8）
jquery 1.~(>=ie6),jquery 2.~(>=ie9)
vue(>=ie9)
根據不同的兼容需求選擇框架，如jquery等。還有各種兼容性工具，html5shiv.js,respond.js,css reset,normalize.css,modernizr.針對IE的條件注釋，css Hack，js能力檢測
根據兼容需求選擇兼容工具包括：比如html5shiv.js、respond.js、等。
3,列舉5種以上瀏覽器兼容的寫法
IE 條件注釋
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
屬性前綴法(即類內部Hack)
“_″IE6 生效
"*" IE6 7生效
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效
“\9\0″ 只對IE9/IE10生效
Trident內核：主要代表為IE瀏覽器,前綴為-ms
Gecko內核：主要代表為Firefox,前綴為-moz
Presto內核：主要代表為Opera,前綴為-o
Webkit內核：產要代表為Chrome和Safari,前綴為-webkit
.box {
color: red; /* 所有瀏覽器都生效 */
_color: blue; /* 只有 IE 6 生效 */
*color: pink; /* 只有 IE 6 IE 7 生效 */
color: yellow\9; /* IE 6~8 都生效 */
}
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
選擇器前綴法
針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack（針對瀏覽器之間的表現差異而引入的，利用瀏覽器的bug來進行針對性處理）
例如：
*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有效
<!--[if IE 7]>
<html class="ie7 no-js">
...
</html>
<![endif]-->
.clearfix {
/* 在非ie 7 瀏覽器中，clearfix展現該屬性 */
}
.ie7 .clearfix {
/* 只有ie7瀏覽器中，clearfix才會展現該屬性 */
}
兼容工具
html5shiv.js： 用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別,并導致CSS不起作用的問題
modernizr.js： 特性檢測器，有就使用原生，沒有就加載polyfill
respond.js： 用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計
css reset，normalize.css：統一瀏覽器基本元素的風格（css reset直接重置瀏覽器的默認樣式;normalize.css保留瀏覽器的原來樣式并且做到每個瀏覽顯示一致）
使用Modernizr
一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，
同時在 html 元素加入方便你調整 CSS 的 class 名，
這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，
支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），
不支持的特性顯示的class是“no-特性名稱”
（可以在css文件中針對不同的class設置不同的屬性值）。
<head>
<meta charset="utf-8">
<title>My Beautiful Sample Page</title>
<script src="modernizr-1.5.min.js"></script>
</head>
<html class="no-js">
頁面加載后的代碼
<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">
4.工具、名詞解釋
條件注釋：條件注釋 ( conditional comment )是用于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼
條件注釋可以被IE 10 之前的版本解釋，IE 10 及以后不再支持條件注釋
IE Hack針對IE瀏覽器編寫不同的CSS，使得在IE瀏覽器中也能得到我們想要的頁面效果
js能力檢測能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力，就可以給出相關的方案。
html5shiv.js:使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽。
respond.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset：“樣式重置”——重置瀏覽器默認樣式
Normalize.css:在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。
Modernizr：一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。
PostCSS：一個JS插件轉換樣式表的工具。這些插件能夠檢驗你的CSS、支持變量和混合，轉化css3的新特性語法、行內圖片等。
5.兼容性查詢
caniuse
browserhacks
