CSS HACK 区分 IE6 IE7 IE8 IE9 IE10 FF opera chrome

2019年了。。。我都以为再也不需要去搞浏览器兼容了。。。啪啪打脸/(ㄒoㄒ)/~~
还是留备用吧。

在写css hack之前，首先要保证IE浏览器的模式是标准模式。科普一下，IE浏览器有两种显示模式，S标准模式，Q兼容模式，css hack是基于IE的标准模式起效的，所以需要强制设置页面的解析模式为S标准模式，否则css hack的结果可能让你很懵逼。文档模式（document mode）是IE8引入的一个新概念。页面的文档模式决定了你可以使用哪个级别的CSS，可以使用JavaScript的哪些API，以及如何对待文档类型（doctype）。设置解析的IE版本和模式，需要用meta元素。

meta 设置 “X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号。请看两种方式的具体作用。

Emulate+IE版本号如下：

EmulateIE9：如果声明了文档类型，则以IE9标准模式渲染页面，否则将文档模式设置为IE5。 
EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5。 
EmulateIE7：如果声明了文档类型，则以IE7标准模式渲染页面，否则将文档模式设置为IE5。

单纯版本号如下：

9：强制以IE9标准模式渲染页面，忽略文档类型声明。
8：强制以IE8标准模式渲染页面，忽略文档类型声明。
7：强制以IE7标准模式渲染页面，忽略文档类型声明。
5：强制以IE5标准模式渲染页面，忽略文档类型声明。

最后是最常用的Edge：

Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。对于IE，始终以IE的S标准模式渲染页面。

原理解释完了，实战代码就是下边这一句，

这里的meta设定，可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核以S标准模式进行渲染。GCF = Google Chrome Frame（谷歌内嵌浏览器框架）

好了，页面设置浏览器渲染模式说完了，接下来进入正题css hack。
css hack详解原文地址：https://www.cnblogs.com/mumble/p/4576489.html
如果想深入研究下css hack，可以去上边的网址看一下。
如果只是现成的拿来用，直接往下看就好。

一般的IE hack 样例，日常够用

/** 专门针对IE的CSS hack样例，一般使用这个版本足以解决绝大部分IE的兼容问题 */  
.iehack{  
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
IE6显示为：绿色， 
IE7显示为：黑色， 
IE8显示为：红色， 
IE9显示为：蓝色， 
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 */  
}  

全面针对各个浏览器的样例

/* 
进阶版CSS HACK 样例，该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的完整hack，本例特别要注意顺序 
IE6显示为：橘色， 
IE7显示为：粉色， 
IE8显示为：黄色， 
IE9显示为：紫色， 
IE10显示为：绿色， 
Firefox显示为：蓝色， 
Opera显示为：黑色， 
Safari/Chrome显示为：灰色，
*/  
.hacktest{   
    background-color:blue;      /* 都识别，此处针对firefox */  
    background-color:red\9;      /*all ie*/  
    background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也认识*/  
    +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:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/  
  
/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */  
/* 
:root .hacktest { background-color:#963\9; }  
*/