主要内容： CSS hack介绍、 浏览器兼容的思路、一些工具的介绍。

CSS hack

由于不同厂商的浏览器， 或是同一厂商的不同版本的浏览器， 对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样， 得不到所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器， 让它能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

具体应用可以参考 主流浏览器的Hack写法

浏览器兼容的思路

要不要做

• 产品的角度： 产品的受众、受众的浏览器比例、效果优先还是基本功能优先
• 成本的角度： 实现难度和成本考虑，比较一下投入产出比

做到什么程度

• 让哪些浏览器支持哪些效果。综合考量需要做到什么浏览器什么版本的兼容，比如兼容到IE7 还是IE6

如何做

• 优雅降级还是渐进增强

• 根据兼容需求选择技术框架/库

• 根据兼容需求选择兼容工具： html5shiv.js , respond.js ,CSS reset , normalize.CSS , modernizr

• PostCSS
  源代码 -> 标准 CSS -> 生产环境 CSS

• 利用条件注释、CSS Hack、 js 能力检测做一些修补

浏览器兼容的写法举例

• IE条件注释（HTML 条件注释Hack）
  HTML的hack由注释演变而来，在高级浏览器中注释不会被加载，把IE浏览器的兼容代码写在注释中，IE浏览器会识别。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

<!--[if IE]>此内容只有IE可见<![endif]-->
<!--[if IE 6.0]>此内容只有IE6.0可见<![endif]-->

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />将对IE7应用此样式
<![endif]–->

项目	范例	说明
！	[if !IE]	非IE
lt	[if lt IE 5.5]	小于IE 5.5
lte	[if lte IE 6]	小于等于IE6
gt	[if gt IE 5]	大于 IE5
gte	[if gte IE 7]	大于等于IE7
|	[if (IE 6)|(IE 7)]	IE6或者IE7

注 ：
（1） 用于写兼容的注释，标签内首位都要加！感叹号。
（2）单词都写在一对中括号中
（3） IE和版本号之间要加空格
（4） 不加比较单词，表示只兼容这一个版本
（5）IE 10+不再支持条件注释

• 属性前缀法（类内部Hack）
  属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不认识。

在标准模式中，
（1）“-″减号是IE6专有的hack
（2）“\9″ IE6/IE7/IE8/IE9/IE10都生效
（3）“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
（4）“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

例如：

height: 100px;    /* 大部分浏览器支持 */
_height: 100px ;  /*  IE6  */
*height: 100px;  /* IE7  */
height: 100px\9;   /* IE6/IE7/IE8/IE9/IE10都生效 */

• 选择器前缀法（选择器Hack）
  选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
  目前最常见的是：
  *html * 前缀只对IE6生效
  *+html *+ 前缀只对IE7生效
  @media screen\9{...} 只对IE6/7生效
  @media \0screen {body { background: red; }} 只对IE8有效
  @media \0screen,screen\9{body { background: blue; }} 只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效
  @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

• 根据兼容需求选择合适的技术框架
  比如 ：
  Bootstrap >= ie8
  jQuery1.xx >=ie6
  jQuery2.xx >=ie9
  vue >= ie9
• 根据兼容需求选择兼容工具： html5shiv.js , respond.js ,CSS reset , normalize.CSS , modernizr

工具/名词

条件注释

利用IE6~9的漏洞（可识别特定特定注释）来区分IE各版本，或区分IE和非IE的一种css hack技术。

IE Hack

指的是利用IE浏览器漏洞来兼容IE低版本，有CSS属性前缀法、选择器前缀法以及IE条件注释法

js 能力检测

使用JS的语法检测浏览器支持的属性和方法。

能力检测使用的要点:

• 先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件；
• 必须测试实际要用到的特性

html5shiv.js

兼容性工具。引入后可在IE6~8（不支持html5标签）上模拟html5标签

respond.js

兼容性工具。引入后在IE6~8（不支持css3）上模拟CSS3 Media Queries

css reset

兼容性工具，思想是重置所有浏览器默认样式，让一切归零。

normalize.css

兼容性工具。引入后可在默认的HTML元素样式上提供跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

Modernizr

Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。该工具会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式。使用时可直接引入CDN链接即可。

postCSS

PostCSS是一个使用JavaScript插件来转换CSS的工具。
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码

如何查询属性兼容性

查兼容性
查询hack写法