2019年了。。。我都以為再也不需要去搞瀏覽器兼容了。。。啪啪打臉/(ㄒoㄒ)/~~
還是留備用吧。

在寫(xiě)css hack之前，首先要保證IE瀏覽器的模式是標(biāo)準(zhǔn)模式?？破找幌?，IE瀏覽器有兩種顯示模式，S標(biāo)準(zhǔn)模式，Q兼容模式，css hack是基于IE的標(biāo)準(zhǔn)模式起效的，所以需要強(qiáng)制設(shè)置頁(yè)面的解析模式為S標(biāo)準(zhǔn)模式，否則css hack的結(jié)果可能讓你很懵逼。文檔模式（document mode）是IE8引入的一個(gè)新概念。頁(yè)面的文檔模式?jīng)Q定了你可以使用哪個(gè)級(jí)別的CSS，可以使用JavaScript的哪些API，以及如何對(duì)待文檔類(lèi)型（doctype）。設(shè)置解析的IE版本和模式，需要用meta元素。

meta 設(shè)置 “X-UA-Compatible”的值有兩種方式：Emulate+IE版本號(hào)，單純版本號(hào)。請(qǐng)看兩種方式的具體作用。

Emulate+IE版本號(hào)如下：

EmulateIE9：如果聲明了文檔類(lèi)型，則以IE9標(biāo)準(zhǔn)模式渲染頁(yè)面，否則將文檔模式設(shè)置為IE5。 
EmulateIE8：如果聲明了文檔類(lèi)型，則以IE8標(biāo)準(zhǔn)模式渲染頁(yè)面，否則將文檔模式設(shè)置為IE5。 
EmulateIE7：如果聲明了文檔類(lèi)型，則以IE7標(biāo)準(zhǔn)模式渲染頁(yè)面，否則將文檔模式設(shè)置為IE5。

單純版本號(hào)如下：

9：強(qiáng)制以IE9標(biāo)準(zhǔn)模式渲染頁(yè)面，忽略文檔類(lèi)型聲明。
8：強(qiáng)制以IE8標(biāo)準(zhǔn)模式渲染頁(yè)面，忽略文檔類(lèi)型聲明。
7：強(qiáng)制以IE7標(biāo)準(zhǔn)模式渲染頁(yè)面，忽略文檔類(lèi)型聲明。
5：強(qiáng)制以IE5標(biāo)準(zhǔn)模式渲染頁(yè)面，忽略文檔類(lèi)型聲明。

最后是最常用的Edge：

Edge：始終以最新的文檔模式來(lái)渲染頁(yè)面。忽略文檔類(lèi)型聲明。對(duì)于IE，始終以IE的S標(biāo)準(zhǔn)模式渲染頁(yè)面。

原理解釋完了，實(shí)戰(zhàn)代碼就是下邊這一句，

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

這里的meta設(shè)定，可以達(dá)到的效果是如果安裝了GCF，則使用GCF來(lái)渲染頁(yè)面，如果沒(méi)安裝GCF，則使用最高版本的IE內(nèi)核以S標(biāo)準(zhǔn)模式進(jìn)行渲染。GCF = Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架）

好了，頁(yè)面設(shè)置瀏覽器渲染模式說(shuō)完了，接下來(lái)進(jìn)入正題css hack。
css hack詳解原文地址：https://www.cnblogs.com/mumble/p/4576489.html
如果想深入研究下css hack，可以去上邊的網(wǎng)址看一下。
如果只是現(xiàn)成的拿來(lái)用，直接往下看就好。

一般的IE hack 樣例，日常夠用

/** 專(zhuān)門(mén)針對(duì)IE的CSS hack樣例，一般使用這個(gè)版本足以解決絕大部分IE的兼容問(wèn)題 */  
.iehack{  
/*該demo實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie9和Firefox/Chrome的hack，注意順序 
IE6顯示為：綠色， 
IE7顯示為：黑色， 
IE8顯示為：紅色， 
IE9顯示為：藍(lán)色， 
Firefox/Chrome顯示為：橘色， 
（本例IE10效果同IE9,Opera最新版效果同IE8） 
*/  
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
}  

全面針對(duì)各個(gè)瀏覽器的樣例

/* 
進(jìn)階版CSS HACK 樣例，該實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie10和Opera/Firefox/Chrome的完整hack，本例特別要注意順序 
IE6顯示為：橘色， 
IE7顯示為：粉色， 
IE8顯示為：黃色， 
IE9顯示為：紫色， 
IE10顯示為：綠色， 
Firefox顯示為：藍(lán)色， 
Opera顯示為：黑色， 
Safari/Chrome顯示為：灰色，
*/  
.hacktest{   
    background-color:blue;      /* 都識(shí)別，此處針對(duì)firefox */  
    background-color:red\9;      /*all ie*/  
    background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也認(rèn)識(shí)*/  
    +background-color:pink;        /*for ie6/7*/  
    _background-color:orange;       /*for ie6*/  
}  
  
@media screen and (min-width:0){   
    .hacktest {background-color:black\0;}  /*opera*/  
}   
@media screen and (min-width:0) {   
    .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:國(guó)外有些習(xí)慣常寫(xiě)作\0，根本沒(méi)考慮Opera也認(rèn)識(shí)\0的實(shí)際 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; } /* for IE10+ 此寫(xiě)法可以適配到高對(duì)比度和默認(rèn)模式，故可覆蓋所有ie10的模式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/  
  
/* #963棕色 :root is for IE9/IE10, 優(yōu)先級(jí)高于@media, 慎用！如果二者合用，必要時(shí)在@media樣式加入 !important 才能區(qū)分IE9和IE10 */  
/* 
:root .hacktest { background-color:#963\9; }  
*/