css hack

含义

由于不同的浏览器，比如Internet Explorer6,Internet Explorer7,Firefox等或者同一厂商的不同版本，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器能在不同的浏览器中也能得到我们想要的页面效果。针对不同的浏览器写不同的css code的过程，就叫css hack。例如\9就是ie8的css hack。

实现原理

由于不同的浏览器对css的支持及解析结果不一样，还由于css中的优先级的关系我们就可以根据这个来针对不同的浏览器来写不同的css。

表现形式

css属性前缀法、选择器前缀法，以及ie条件注释法，实际项目中的css hack大部分是针对ie 浏览器不同版本之间的表现差异而引入的。

浏览器兼容的思路

1. 要不要做
   从产品的角度（产品受众、受众浏览器的比例、效果优先还是基本功能优先）
   成本的角度
2. 做到什么程度：兼容ie8还是兼容ie6/7
3. 如何做

• 根据兼容需求选择技术框架、库
• 根据兼容需求选择兼容工具（html5shiv.js/respond.js/css reset/normalize.css/modernizr）
• postcss
• 条件注释

兼容的写法

处理兼容问题的手段

1. 合适的框架

Bootstrap(>=ie8)
jQuery1.~(>=ie6), jQuery 2.~(>=ie9)
vue(>=ie9)

2. 条件注释

<!--[if IE 6]>
<p>you are using Internet Explorer 6</p>
<! [end if]-->

3. css hack

.box{
  color:red;/*所有浏览器都支持*/
  color:red !important/*Firefox IE7支持*/
  _color:blue;/*ie6支持*/
  *color:pink;/*ie6、7支持*/
  color:yellow\9;/*ie/ edge 6-8*/
}

4. 常见的兼容处理范例

.clearfix:after{
  content:' ';
  display:block;
  clear:both;
}
.clearfix{
  *zoom:1;/*仅对ie6/7有效*/
}

.target{
  display:inline-block;
  *display:inline;
  *zoom:1;/*触发haslayout，可以设置宽度、高度等*/
}

顺序很重要，否则会出现无效值。

5. 使用兼容工具

条件注释

条件注释是一种安全的区分ie 浏览器版本的语法且被认为是取代针对ie css hack 的首选办法。
条件注释只能用于ie5以上。且ie10不再支持。
条件注释的基本结构和html的注释是一样的。因此，ie以外的浏览器将会把它们看做是普通的注释而忽略它们。
ie将会根据if条件来判断是否如解析普通的页面内容一样解析注释里的内容。

条件注释的应用

<!--[if IE7]>
<!--如果IE浏览器是7，调用ie7.css样式表-->
<link rel='stylesheet' type='text/css' href='ie7.css'>
<![endif]-->

这其中就区分了ie7浏览器对css 的执行，达到兼容的目的。

常见的属性

IE Hack

针对IE浏览器编写不同的css能让IE正常渲染的过程。

js能力检测

浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器是否支持特定的能力就可以给出特定的解决方案，这一部分检测是解决浏览器兼容问题的主要检测。

html5shiv.js

用于解决ie9以下版本浏览器对html5新增标签不识别，并导致css不起作用的问题，所以我们在使用的过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么就用到了html5shivjs。

respond.js

让不支持css3 Media Query的浏览器包括ie6-ie8等其他浏览器支持查询。

css reset

重置css样式，即将所有浏览器的自带样式重置掉，这样更易于保持各个浏览器渲染的一致性。
缺点：

1. CSS文件的大小
   显然，css reset平白无故的增加了css文件的大小虽然，增加的大小可能有限，但是，即使0.1秒的载入时间也会影响互联网的收入的。
2. 样式的重置
   许多的css样式要重写与重新覆盖，典型的多此一举。
3. CSS的渲染
   这可以说是很大的问题，样式无缘无故增加了很多的渲染，想想看一个项目或者是一个页面中有多少个div标签，居然使用div{margin:0;padding:0;},当然，*{padding：0；margin:0;}更是无法容忍的。

normalize.css

是一种css reset的替代方案，尽量保留浏览器的默认样式，不进行太多的重置。
优点：

1. 保护有用的浏览器默认的样式而不是完全去掉它们。
2. 为大部分html元素提供一般化的样式。
3. 修复浏览器自身的bug 并保证各浏览器的一致性。
4. 用一些小技巧优化css的可用性。
5. 用注释和详细的文档来解释代码。

Modernizr

很久之前，我们总要用自己的代码检测浏览器对某种特性的支持情况，比如要写代码判断浏览器是否支持canvans。许多html5和css3的功能已经在许多主流浏览器中实现出来。modernizr能够告诉开发者，浏览器是否已经实现他们想要的功能。这让开发者在浏览器上可以充分利用这些新功能，或者尝试制作解决方案来支持那些老旧的浏览器。

postCss

是使用js插件来转换css的工具，支持变量，混入，未来css语法，内联图像等。postcss可以作为预处理器使用，类似sass,less和stylus。但是，postcss是模块化的工具，比之前那些快3-30倍，而且功能更强大。

查询属性兼容性的网站

浏览器市场份额
caniuse.com（查css属性的兼容）
browserhacks（查hack的写法）