什么是 CSS hack
Hack是針對(duì)不同瀏覽器去寫(xiě)不同的CSS樣式删掀，從而讓各瀏覽器能達(dá)到一致的渲染效果，那么針對(duì)不同的瀏覽器寫(xiě)不同的CSS CODE的過(guò)程就叫做CSS Hack拉盾。然后將Hack放在瀏覽器特定的CSS文件中，讓符合條件的瀏覽器去解析這些代碼可很，符合條件的就解析睛驳，不符合的就不解析，從而達(dá)到所需要的頁(yè)面渲染效果稿械⊙⌒海總的一句話來(lái)說(shuō)就是使用CSS Hack將會(huì)使你的CSS代碼部分失去作用，然后借助條件樣式美莫，使用其原CSS代碼在一些瀏覽器解析页眯，而CSS Hack代碼在符合條件要求的瀏覽器中替代原CSS那部分代碼。
談一談瀏覽器兼容的思路
主要從三個(gè)方面去考慮：
要不要去做茂嗓？主要從產(chǎn)品的角度和成本的角度去考慮餐茵；產(chǎn)品的角度來(lái)說(shuō)我們要考慮清楚產(chǎn)品的使用群體，以及受眾的瀏覽器比例述吸，從中分析我們需要效果優(yōu)先還是功能優(yōu)先忿族。從成本的角度分析，就是我們做某個(gè)功能值不值得蝌矛，有沒(méi)有必要道批，付出和收獲是否不成比例。
如果做入撒，做到什么程度隆豹？具體到需要讓那些瀏覽器支持哪些效果，在不同的瀏覽器側(cè)重點(diǎn)也不同茅逮。例如：漸進(jìn)增強(qiáng)和優(yōu)雅處理璃赡。漸進(jìn)增強(qiáng)是指針對(duì)低版本瀏覽器進(jìn)行頁(yè)面構(gòu)建，保證最基本的功能献雅，在這基礎(chǔ)上補(bǔ)充一些高級(jí)瀏覽器的效果碉考，功能，交互挺身；優(yōu)雅降級(jí)：針對(duì)高級(jí)瀏覽器侯谁，構(gòu)建完整的功能，再針對(duì)低版本的瀏覽器去做一些兼容。
如何去做墙贱？根據(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能力檢測(cè)做一些修補(bǔ)热芹。
列舉5種以上瀏覽器兼容的寫(xiě)法
條件注釋：
<!--[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伊脓，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。常見(jiàn)的Hack寫(xiě)法：
.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]-->
屬性兼容問(wèn)題
常見(jiàn)的屬性兼容情況如下：
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動(dòng)畫(huà)/漸變: >= ie10
常見(jiàn)處理范例如下：
.clearfix:after{content: '';display: block;clear: both;}.clearfix{zoom: 1; / 僅對(duì)ie67有效 /}
.target{display: inline-block;display: inline;*zoom: 1;}
以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句串纺。條件注釋可被用來(lái)向IE提供及隱藏代碼丽旅。（IE10不再支持條件注釋）。
IE Hack
專門(mén)準(zhǔn)對(duì)IE瀏覽器不同版本間的兼容性問(wèn)題的處理纺棺，使之能夠渲染出想要的效果榄笙。
js 能力檢測(cè)
是指js中兼容性問(wèn)題的一些封裝。通過(guò)js封裝函數(shù)或?qū)ο髞?lái)解決瀏覽器的兼容問(wèn)題祷蝌。
html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別茅撞，并導(dǎo)致CSS不起作用的問(wèn)題。使用Javascript來(lái)使不支持HTML5的瀏覽器支持HTML標(biāo)簽巨朦。利用腳本document.createElement(“”)創(chuàng)建對(duì)應(yīng)的腳本米丘，CSS選擇器便可正確應(yīng)用到該標(biāo)簽。
respond.js
Respond.js 是一個(gè)快速糊啡、輕量的 polyfill拄查，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)棚蓄。（Responsive Web Design）
css reset
HTML標(biāo)簽在瀏覽器中都有默認(rèn)的樣式堕扶，例如p標(biāo)簽有上下邊距，strong標(biāo)簽有字體加粗樣式等梭依。不同瀏覽器的默認(rèn)樣式之間存在差別稍算，例如ul默認(rèn)帶有縮進(jìn)樣式，在IE下役拴，它的縮進(jìn)是由margin實(shí)現(xiàn)的糊探，而在Firefox下卻是由padding實(shí)現(xiàn)的。開(kāi)發(fā)時(shí)瀏覽器的默認(rèn)樣式可能會(huì)給我們帶來(lái)多瀏覽器兼容問(wèn)題河闰，影響開(kāi)發(fā)效率科平。解決方法其中之一是開(kāi)始就將瀏覽器的默認(rèn)樣式全部覆蓋掉，這就是CSS reset姜性。
normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件匠抗，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一。它可以保留有用的默認(rèn)值污抬，不同于許多 CSS 的重置,其標(biāo)準(zhǔn)化的樣式，適用范圍廣的元素。糾正錯(cuò)誤和常見(jiàn)的瀏覽器的不一致性印机。一些細(xì)微的改進(jìn)矢腻，提高了易用性。使用詳細(xì)的注釋來(lái)解釋代碼射赛。
Modernizr
Modernizr是一個(gè)檢測(cè)用戶瀏覽器HTML5和CSS3能力的JavaScript庫(kù)多柑。Modernizr在頁(yè)面加載時(shí)快速運(yùn)行來(lái)檢測(cè)功能；之后它會(huì)創(chuàng)建一個(gè)保存檢測(cè)結(jié)果的JavaScript對(duì)象楣责，然后為你頁(yè)面中的html標(biāo)簽上添加一系列class屬性來(lái)接通你的CSS竣灌。Modernizr支持大量的測(cè)試和可選地包括YepNope.js來(lái)視情況加載外部的js和css資源。
postCSS
PostCSS 是使用 JS 插件來(lái)轉(zhuǎn)換 CSS 的工具秆麸，支持變量初嘹，混入，未來(lái) CSS 語(yǔ)法沮趣，內(nèi)聯(lián)圖像等等屯烦。PostCSS是CSS變成JavaScript的數(shù)據(jù)，使它變成可操作房铭。PostCSS是基于JavaScript插件驻龟，然后執(zhí)行代碼操作。PostCSS自身并不會(huì)改變CSS缸匪，它只是一種插件翁狐，為執(zhí)行任何的轉(zhuǎn)變鋪平道路。
