1使兔、什么是 CSS hack
由于不同的瀏覽器或同一瀏覽器的不同版本(IE6-IE11践图，F(xiàn)irefox哮笆，safari朝聋，chrome嗡午，Opera等)對CSS支持和展現(xiàn)的效果不一樣，
會在不同瀏覽器環(huán)境中展現(xiàn)不一致的頁面樣式和功能冀痕。
為了獲得統(tǒng)一的頁面效果荔睹，就需要針對不同的瀏覽器環(huán)境寫特定的CSS樣式，這個針對不同的瀏覽器環(huán)境寫不同的CSS code的過程稱為CSS hack言蛇。
2僻他、談一談瀏覽器兼容的思路?
1、要不要做
首先看看有沒有必要實現(xiàn)瀏覽器兼容的腊尚，產(chǎn)品的受眾吨拗、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先
2婿斥、做到什么程度
讓哪些瀏覽器支持哪些效果
3劝篷、怎么做
根據(jù)兼容需求選擇技術(shù)庫和框架比如
bootstrap（>=ie8）
jquery 1.~(>=ie6),jquery 2.~(>=ie9)
vue(>=ie9)
根據(jù)不同的兼容需求選擇框架，如jquery等民宿。還有各種兼容性工具娇妓，html5shiv.js,respond.js,css reset,normalize.css,modernizr.針對IE的條件注釋，css Hack勘高，js能力檢測
根據(jù)兼容需求選擇兼容工具包括：比如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]-->
屬性前綴法(即類內(nèi)部Hack)
“_″IE6 生效
"*" IE6 7生效
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效
“\9\0″ 只對IE9/IE10生效
Trident內(nèi)核：主要代表為IE瀏覽器,前綴為-ms
Gecko內(nèi)核：主要代表為Firefox,前綴為-moz
Presto內(nèi)核：主要代表為Opera,前綴為-o
Webkit內(nèi)核：產(chǎn)要代表為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;
}
選擇器前綴法
針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器蕊蝗，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進(jìn)行hack（針對瀏覽器之間的表現(xiàn)差異而引入的，利用瀏覽器的bug來進(jìn)行針對性處理）
例如：
*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展現(xiàn)該屬性 */
}
.ie7 .clearfix {
/* 只有ie7瀏覽器中蓬戚，clearfix才會展現(xiàn)該屬性 */
}
兼容工具
html5shiv.js： 用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別,并導(dǎo)致CSS不起作用的問題
modernizr.js： 特性檢測器，有就使用原生宾抓，沒有就加載polyfill
respond.js： 用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性子漩，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計
css reset，normalize.css：統(tǒng)一瀏覽器基本元素的風(fēng)格（css reset直接重置瀏覽器的默認(rèn)樣式;normalize.css保留瀏覽器的原來樣式并且做到每個瀏覽顯示一致）
使用Modernizr
一個 JavaScript 庫石洗，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性幢泼。
Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象讲衫，
同時在 html 元素加入方便你調(diào)整 CSS 的 class 名缕棵，
這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，
支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），
不支持的特性顯示的class是“no-特性名稱”
（可以在css文件中針對不同的class設(shè)置不同的屬性值）招驴。
<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能力檢測能力檢測的目標(biāo)不是識別特定的瀏覽器，而是識別瀏覽器的能力触趴。使用這種方式無需顧及瀏覽器如何如何氮发，只需確定瀏覽器是否支持特定的能力，就可以給出相關(guān)的方案雕蔽。
html5shiv.js:使用Javascript來使不支持HTML5的瀏覽器支持HTML標(biāo)簽折柠。
respond.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset：“樣式重置”——重置瀏覽器默認(rèn)樣式
Normalize.css:在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性批狐。相比于傳統(tǒng)的CSS reset扇售，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案嚣艇。
Modernizr：一個 JavaScript 庫承冰，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 會在頁面加載后立即檢測特性食零；然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象困乒，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。
PostCSS：一個JS插件轉(zhuǎn)換樣式表的工具贰谣。這些插件能夠檢驗?zāi)愕腃SS娜搂、支持變量和混合，轉(zhuǎn)化css3的新特性語法吱抚、行內(nèi)圖片等百宇。
5.兼容性查詢
caniuse
browserhacks
