什么是css hack？
有些人不知道css hack是什么..........但是我想任何一个前端开发一定是遇到过的。
我们现在有5大浏览器内核
1. Trident 主要代表是IE浏览器 -ms
2. Gecko 主要代表是FF（FireFox） -moz
3. Webkit 主要代表是safari ，曾经的google也是 -webkit
4. Presto 主要代表是opera -o
5. Blink 主要代表是现在的google
不同的浏览器对应不同的内核，它们对css的解析是不一样的，这样就会导致在不同的浏览器中呈现出不一致的效果，为了获得统一（或者为了给不同的浏览添加不同效果），就需要针对不同的浏览器或者不同的版本写特定的css样式，这就叫css hack
css hack解决方法
1. css属性前缀法 例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"9"，但firefox前述三个都不能认识。
2. css选择器前缀法 例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
3. IE条件注释法 针对所有IE(注：IE10+已经不再支持条件注释)： IE浏览器显示的内容 ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
css属性前缀法
IE浏览器各版本 CSS hack 对照表
说明：在标准模式中
- “-″减号是IE6专有的hack
- “9″ IE6/IE7/IE8/IE9/IE10都生效
- “ ″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “9 ″ 只对IE9/IE10生效，是IE9/10的hack
css3 hack
这只是一部分，另外，随着css3的出现和使用，我们看到的更多的是-ms-，-moz-，-webkit-，-o-
对于css3的属性，并不是每个浏览器都支持，所以我们在使用的时候都要加上对应的前缀
但是在写大量css的时候是不是会很麻烦呢..........不用担心，现在的有很多插件帮助我们简化开发，提高效率
这就是Atuoprefixer
像 grunt autoprefixer ，你可以安装grunt-autoprefixer
像 gulp autoprefixer , 你可以安装gulp-autoprefixer
像 sublime , 你可以安装sublime autoprefixer
................
他们会自动检测需要css hack的属性，自动生成响应的css,十分方便
css选择器前缀法
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen9{...}只对IE6/7生效 @media screen {body { background: red; }}只对IE8有效 @media screen\,screen9{body { background: blue; }}只对IE6/7/8有效 @media screen0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-00) {body { background: gray; }}只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效 @media screen and （-webkit-min-device-pixel-ratio:0）{} 对webkit核心有效 @-moz-document url-prefix(){} 对firefox浏览器有效 @media all and(-webkit-min-device-pixel-ratio:10000),not and all(-webkit-min-device-pixel-ratio:0){} 对opera浏览器有效
这里只是一小部分
CSS3选择器结合JavaScript的Hack
我们用IE10进行举例：
由于IE10用户代理字符串（UserAgent）为：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以我们可以使用javascript将此属性添加到文档标签中，再运用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;
}
各个浏览器都可以
IE条件注释法
这种方式是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]-->
1 <!--[if IE]><p>You are using Internet Explorer.</p><![endif]--> 2 <![if !IE]><p>You are not using Internet Explorer.</p><![endif]> 3 4 <!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]--> 5 <!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]--> 6 7 <!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]--> 8 <!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]--> 9 <!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]--> 10 <!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]--> 11 12 <!--[if true]>You are using an <em>uplevel</em> browser.<![endif]--> 13 <![if false]>You are using a <em>downlevel</em> browser.<![endif]> 14 15 <!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
适用范围广的，识别能力强的css一定要定义在前面