CSS Hack
不同的浏览器对某些CSS代码解析会存在一定的差异，因此就会导致不同浏览器下给用户展示的页面效果不一样，碰到这样的情况就需要开发人员通过针对不同的浏览器对应写出不同的CSS代码，从而达到兼容不同浏览器的目的，不会让页面因为浏览器的不同而产生有差异的显示，这种技术有个专门的名称就是CSS Hack。
在中国，这种差异主要是体现在主流浏览器上，我们只要解决了主流浏览器之间的CSS差异就可以了。目前流行的主流浏览器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里对应简称为IE（后面如果添加数字，数字代表版本号，例如IE8）。
CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。
CSS Hack有三种实现方式，它们分别是：CSS类内部的Hack、CSS选择器的Hack和HTML头部的Hack。
CSS类内部的Hack：是指CSS属性或属性值里加上只有某个浏览器自己可以识别的特殊字符串。例如IE6和IE7都会识别在CSS里属性名称前加上“*”号的属性，但是firefox却无法识别带“*”号的属性，因此下面的代码：
body{
background:green;/* firefox下的显示 * /
*background:red; /* IE6和IE7下的显示 * /
}
CSS选择器的Hack：它是指在CSS选择器前面加上只有某种浏览器自己可以识别的特殊字符串。例如：IE6能识别*html .class{}，IE7能识别*+html .class{}。
HTML头部的Hack：这种方式主要是针对IE浏览器，IE浏览器是广大Web前端工程师的痛，它不仅有很多自己独有的区别于其他浏览器的CSS样式，自己不同版本之间的CSS实现也会存在很大的差异。下面我们来看看这种方式的写法：
<link src="iecss.css" rel="stylesheet" />
<![endif]-->
lt 小于
gt 大于
gte 大于或等于
lte 小于或等于
！ 非
这种写法会被非IE的浏览器所忽略，只有IE浏览器才会执行上面的代码，上面这段代码的意思是当IE的版本是8或者比8低的IE浏览器才会执行下面的样式。
下面我们来看一段代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技术</title>
</head>
<style type="text/css">
div {
width:400px;
height:120px;
margin-bottom:20px;
border-style:solid;
border-width:1px;
}
div.d01{
background:red;/* FF */ background:blue\0;/* OP */ background:turquoise\9;/* IE8+ */ [background:red;background:black;/* SA,CH */
*background:green; /* IE7 */ _background:yellow;/* IE6 */
}</style>
<body>
<div class="d01">
</div>
</body>
</html>
运行这个页面，firefox显示的颜色是red，opera为blue，ie6为yellow，ie7为green，ie8以上的版本是turquoise，chrome和safari为blcak。这个CSS Hack是我平时常用的一套模式。这里要说明下，ie8以上包括ie8的CSS样式差异性较少，而chrome和safari之间的CSS样式差异较小，因此这里我并没有为它们单独进行hack。
如果我们把上面代码里的div.d01的内容顺序调整下，例如下面这样：
background:blue\0;/* OP\ */ background:turquoise\9;/* IE8+ */ [background:red;background:black;/* SA,CH */ *background:green; /* IE7 */ _background:yellow;/* IE6 */ background:red;/* FF */
我们会发现不同浏览器显示的效果就会发生变化。ie8以上的版本以及opera显示正常，但是chrome，safari，ie6，ie7显示的是红色，而firefox则没有任何颜色。引起这个问题的原因是CSS优先级的问题，例如background:turquoise\9;这种写法不会导致高版本的ie在显示上产生偏差，是因为高版本的ie会优先使用这个样式，对于同级别的CSS样式，最后面的样式会覆盖前面的样式，例如我们在ie6和ie7下看到的情况，此外，如果正确的样式前面的样式写法导致浏览器无法正常解析，那么就会导致整个CSS样式加载的失败，例如firefox。
因此编写CSS Hack时候，对于属性排列的顺序是特别注意的。
CSS Hack是一个总结性和经验性很强的技术，它不像很多编程技术那样需要我们去反复理解一些逻辑上的关系，而是需要我们平时多留心，多实践。接下来我将会列举不同浏览器之间的CSS Hack技术，大家可以根据自己实际的情况选择应用。
对于ie，我们这边主要考虑ie6，ie7，ie8，ie9，这四种版本的ie是目前中国市场上最流行的ie版本，虽然ie10已经出来，但是ie10现在使用的用户相对较少，这边不会作为重点讲解。
对于CSS类内部的Hack ，ie6有自己专有的判断标识“”,其他的浏览器都不会识别””,ie6也支持”*”，但是“*”也被ie7识别，因此当我们只想区别ie6和ie7的时候，可以按下面的代码书写：
div.d02{ *background:green; /* IE7\ */ _background:yellow;/* IE6 */}
上面的写法既可以区分ie6和ie7，但是如果我们颠倒其位置，那么不管是ie6还是ie7都会显示green颜色。”*”和“_”是ie6和ie7专属的，其他版本的浏览器都不支持该标记。
ie6和ie7除了上面两个专属标记，IE6还能识别能识别*html selector{}，IE7还能能识别*+html . selector {}，大家看下面这段代码：
*html div.d03{ background:yellow;/* IE6 */}*+html div.d03{ background:green;/* IE7 */}
这两种写法是等价的。IE6的*html selector {}和IE7的*+html . selector {}也都是专有标记，别的浏览器都不会识别的。
还有个很有趣的标记，就是!important，在网上很多资料说该标记IE6不支持，IE7和firefox支持，为了验证网上说法本人写了下面的样式：
div.d04{ background:red !important; }
使用的浏览器配置如下：
支持IE7，IE8，IE9；IE6通过ietester实现；firefox版本是23.0.1；chrome的版本是27.0.1453.116 m；opera的版本是12.12，运行上面的样式实际的效果是：
IE6，IE7，chrome，safari显示为红色，而 其他浏览器都没有显示任何颜色。
浏览器兼容的思路
-
要不要做
产品的角度（产品的受众、受众的浏览器比 例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)
做到什么程度 让哪些浏览器支持哪些效果
如何做-
根据兼容需求选择技术框架/库(jquery)
1. Bootstrap (>=ie8) 2. jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) 3. Vue (>= ie9) 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
渐进增强和优雅降级
** 渐进增强 (progressive enhancement)**
- 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 (graceful degradation)
- 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
浏览器兼容的写法
条件注释：
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->属性选择器
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6 7*/
color: yellow\9; /*ie/edge 6-8*/
}选择器前缀法
*html //只对IE6生效
*+html //只对IE7生效
@media screen\9{...} //只对IE6 7生效条件注释结合类选择器
<html dir="ltr" lang="en-US" class="no-js">利用Modernizr工具
- 条件注释
在HTML源码中被IE有条件解释的语句，可被用来向IE提供及隐藏代码。
但使用了条件注释的页面只能在IE9中正常工作，IE10不再支持条件注释。
项目 范例 说明
IE Hack
针对不同的IE浏览器编写不同的CSS，从而使IE能够渲染出预期效果的过程。js 能力检测
使用JS的语法检测浏览器支持的属性，以便展示效果html5shiv.js
用来在 IE6、7、8 中模拟实现 html5 的标签，以实现对 IE 6、7、8 的兼容respond.js
在IE6、7中模拟实现CSS3的媒体查询，实现响应式css reset
用来完全去除浏览器的默认样式normalize.css
是css reset的改良版，在css reset的基础上保护有用的浏览器默认样式、为大部分HTML元素提供一般化的样式、修复浏览器自身的bug并保证各浏览器的一致性、使用一些小技巧优化CSS可用性、用注释和详细的文档来解释代码。Modernizr
Modernizr是一 个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性postCSS
PostCSS是一个JS插件转换样式表的工具，这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。
一般在哪个网站查询属性兼容性？
可以使用 caniuse.com来查询CSS属性兼容情况，使用browserhacks.com来查询浏览器兼容的写法。
