什么是CSS hack辉饱？
由于不同廠商的流覽器或某瀏覽器的不同版本（如IE,Firefox/Safari/Opera/Chrome等）喘漏，對(duì)CSS的支持、解析不一樣争舞，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果士修。這時(shí)枷遂，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對(duì)不同的瀏覽器或不同版本寫特定的CSS樣式李命，我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程登淘，叫做CSS hack!
簡(jiǎn)單的說：hack是針對(duì)不同的瀏覽器去寫不同的CSS樣式，從而讓各瀏覽器能達(dá)到一致的渲染效果封字。
CSS hack書寫順序
一般是將適用范圍廣、被識(shí)別能力強(qiáng)的CSS定義在前面耍鬓。
CSS hack分類
CSS Hack大致有3種表現(xiàn)形式：
1阔籽、CSS屬性前綴法；
2牲蜀、選擇器前綴法笆制；
3、IE條件注釋法（即HTML頭部引用if IE）Hack涣达；
實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的在辆。
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線"_"和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "度苔，但不能識(shí)別下劃線"_"匆篓，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)寇窑。
選擇器前綴法(即選擇器Hack)：例如 IE6能識(shí)別*html .class{}鸦概，IE7能識(shí)別*+html .class{}或者*:first-child+html .class{}。
IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： IE瀏覽器顯示的內(nèi)容 甩骏，針對(duì)IE6及以下版本： 只在IE6-顯示的內(nèi)容 窗市。這類Hack不僅對(duì)CSS生效先慷，對(duì)寫在判斷語句里面的所有代碼都會(huì)生效。
CSS hack方式一：條件注釋法
這種方式是IE瀏覽器專有的Hack方式咨察，微軟官方推薦使用的hack方式论熙。
舉例如下：
只在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]-->
CSS hack方式二：類內(nèi)屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴，以達(dá)到預(yù)期的頁面展現(xiàn)效果摄狱。
IE hack 技術(shù)
_width: 400px;??????????? /* _是針對(duì)IE6*/
+width: 300px;?????????? /* +是針對(duì)IE6脓诡、IE7*/
*width: 400px;??????????? /*? *是針對(duì)IE6、IE7*/
width: 200px\9;????????? /* \9是針對(duì)IE6 IE7 IE8 IE9 IE10*/
width: 100px\0;????????? /* \0是針對(duì)IE8 IE9 IE10 IE11 */
瀏覽器內(nèi)核與前綴
內(nèi)核 ? ? ? ? ? 內(nèi)核前綴 ? ? ? ? ? 瀏覽器
Webkit ? ? ? ?-webkit-?????? ? Safari二蓝、Chrome27以下
Blink?????? ? ? -webkit-??????? Chrome28以上誉券、Opera15以上
Gecko???????? -moz-?????????? 火狐瀏覽器
Trident ? ? ? ? -ms-????????? ? IE系列、360安全瀏覽器
Presto?????? ??? -o-??????????? ? Opera12以下
CSS hack方式三：選擇器前綴法
選擇器前綴法是針對(duì)一些頁面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器刊愚，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack踊跟。
目前最常見的是：
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen\9 {body { background: gray; }} 只對(duì)IE6/7生效
@media \0screen {body { background: red; }} 只對(duì)IE8有效
@media \0screen\,screen\9 {body { background: blue; }} 只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)? {body { background: orange; }} 只對(duì)IE10有效
CSS3選擇器結(jié)合JavaScript的Hack
我們用IE10進(jìn)行舉例：
由于IE10用戶代理字符串（UserAgent）為：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以我們可以使用Javascript將此屬性添加到文檔標(biāo)簽中鸥诽，再運(yùn)用CSS3基本選擇器匹配商玫。
JavaScript代碼:
var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );
CSS3匹配代碼：
html[data-useragent*='MSIE 10.0'] #id {
? ? ? ? color: #F00;
}
CSS hack利弊
一般情況下，我們盡量避免使用CSS hack牡借，但是有些情況為了顧及用戶體驗(yàn)實(shí)現(xiàn)向下兼容拳昌，不得已才使用hack。
比如由于IE8及以下版本不支持CSS3,而我們的項(xiàng)目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染钠龙，這種情況下如果不使用css3pie或htc或條件注釋等方法時(shí),可能就得讓IE8-的專屬hack出馬了炬藤。
使用hack雖然對(duì)頁面表現(xiàn)的一致性有好處，但過多的濫用會(huì)造成html文檔混亂不堪碴里，增加管理和維護(hù)的負(fù)擔(dān)沈矿。
補(bǔ)充：各瀏覽器下Hack的寫法
1、Firefox
只被Firefox瀏覽器識(shí)別的寫法咬腋，具體如下：
@-moz-document url-prefix() { .demo { color:lime; } }
/* 支持所有Firefox版本 */
寫法一：#selector[id=selector] { property: value; }
寫法二：@-moz-document url-prefix() { .selector { property: value; } }
/* 支持所有Gecko內(nèi)核的瀏覽器 (包括Firefox) */
*>.selector { property: value; }
2羹膳、Webkit內(nèi)核瀏覽器(chrome and safari)
以下寫法主要是針對(duì)Webkit內(nèi)核的瀏覽器，如Chrome 和 Safari瀏覽器：
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }
3根竿、Opera瀏覽器
下面是Opera瀏覽器的Hack寫法：
html:first-child>body Selector { background: green; }
或者：@media all and (min-width:0) { Selector { background: green; } }
或者：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { background: green; } }
