浏览器兼容
一、什么是浏览器兼容问题
原因：
1. 不支持：框架或者属性
2. 同一产品，版本越老，bug越多
3. 同一产品，版本越多，功能越多
4. 不同产品，不同标准，不同的实现方式
二、常用网站
- 浏览器市场份额统计
- 查询是否支持某个css属性
- 查询hack的写法
三、处理兼容问题的思路
- 是否需要兼容：兼容到IE几
- 做到什么程度，支持哪些效果：一般PC兼容就是兼容IE，国产浏览器一般为IE/Chrome内核，Firefox等会自动升级
- 如何做
3.1 根据兼容需求选择技术框架
3.2 使用兼容工具（html5shiv.js/normalize.css/Modernizr/respond.js/css reset）
3.3 postCSS：自动加前缀
3.4 条件注释，css hack，js能力检测做一些修补
四、渐进增强和优雅降级
渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验
优雅降级
一开始就构建完整的功能，再针对低版本浏览器进行兼容
五、处理兼容问题的手段
1、合适的框架
2、条件注释（conditional comment）
条件注释是于HTML源码中被IE有条件解释的语句，可用来向IE提供及隐藏代码
IE9支持，IE10不再支持
写法如下
这种注释在chrome等浏览器中是不解析的，但在IE9是识别的，是生效的。
3、CSS hack
针对不同的浏览器去写不同的CSS，在不同的浏览器中也能得到我们想要的页面效果，这就是CSS HACK。
CSS HACK有3种表现形式：
1. 属性前缀法：
在标准模式中，
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
* 2. 选择器前缀法*
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack，主要是因为某些浏览器的版本不能支持部分选择器。比如html:first-child等。
*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有效
等等3. IE条件注释法
种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式
只在IE下生效
只在IE6下生效
只在IE6以上版本生效
只在IE8上不生效
非IE浏览器生效
四、CSS hack的优缺点
常见属性的兼容情况：
inline-block: >=ie8
min-width/min-height: >=ie8
:before/:after: >=ie8
div:hover: >=ie7
background-size: >=ie9
border-radius: >=ie9
box-shadow: >=ie9
animation/gradients: >=ie10一般情况下，应该尽量避免使用css hack，因为过多的滥用会使html文档变得混乱，难以管理和维护。
当各大浏览器厂商的标准趋于统一，这些IE hack等的写法就再也无需使用啦。
五、处理浏览器兼容的工具
1、html5shiv.js
解决了IE9以下浏览器对HTML5新增的标签不支持，导致css不起作用的问题，比如：
<article>
<aside>
<command>
<details>
……使用方法：
1.在head中引用文件
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">script>2.在css中添加以下代码：
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}原理解析：
html5shiv.js其实就是一个js插件，它将所有浏览器不能识别的标签利用document.createElement进行了重新生成，并且为这些元素提供了最基本的样式。
2.respond.js
media query的支持程度是IE9+以及其它的浏览器，主要是为了对PC/移动端进行响应式布局。
respond.js让不支持css3 media query的浏览器包括ie6-ie8等其它浏览器支持。
使用方法：
1. 引入文件
需要注意的是：引入respond.min.js文件，要在css文件之后
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="test.css" charset="utf-8">
<script src="respond.min.js">script>
head>
<body>
body>
html>2.书写基本的响应式布局：
html,body { height: 100%; }
@media only screen and (min-width: 480px){
body { background: yellow; }
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
body { background: green; }
}
@media screen and (min-width: 1024px){
body { background: blue; }
}原理解析：
1. 把head中所有的css路径取出来放入数组
2. 然后遍历数组一个个发ajax请求
3. ajax回调后仅分析response中的media query的min-width和max-width语法，分析出viewport变化区间对应相应的css块
4. 页面初始化时和window.resize时，根据当前viewport使用相应的css块。
参考链接
3. css reset
用于改写html标签的默认样式，有些html标签在浏览器中有默认的样式，比如p标签有上下边距，li标签前面有个点，这些默认样式再不同浏览器之间会有差别，因此为了统一风格，会将这些默认样式去掉，即重新定义标签样式，覆盖原有的默认样式。
使用方法：
已不建议使用
原理解析：
1. 早期的css reset其实就是把所有的浏览器默认样式清除
* { margin:0; padding:0 }但是这种方式是简单而且粗暴的，因为使用通配符会带来性能问题，而且过度的标签重置是冗余的，有些样式本来就是常用的，我们不需要清除。
2. 因为最初的暴力归零的方法被嫌弃，因此有人又在此基础上进行了改善，程序员应该按照自己的需求，进行修改后再应用到自己的项目中。
3. 随着前端的专业化，css reset退出了舞台，被Normalize..css取代
4. Normalize.css
Normalize.css与reset.css的风格不同，它没有一刀切，而是注重通用的方案。
它主要做了以下一些工作：
- 统一了一些元素在所有浏览器下的表现，保护有用的浏览器默认样式而不是完全清零它们，让它们在各个浏览器下表现一致；
- 为大部分元素提供一般化的表现；
- 修复了一些浏览器的 Bug ，并且让它们在所有浏览器下保持一致性；
- 通过一些巧妙的细节提升了 CSS 的可用性；
- 提供了详尽的文档让开发者知道，不同元素在不同浏览器下的渲染规则；
使用方法：
建议：把Normalize.css里面的所有内容放在自己的style.css的最上面，那样如果有冲突的话，写在后面的CSS设置默认是会覆盖掉写在前面的。
首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。
[下载地址](https://github.com/necolas/normalize.css/)
策略一：将normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。
策略二：引入normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。5. Modernizr
针对可用性去检测，判断当前浏览器是否支持这个属性。
Modernizr 提供了一种简单的方式检测任意新特性，从而让我们可以采取相应的操作。比如，浏览器还不支持视频特性，那么我们可以显示一个简单的页面。
我们还可以基于某个特性的可用性来创建 CSS 规则，如果浏览器不支持某个新特性，那么这些规则将会自动应用到网页上。
使用方法：
1. 下载，[官网地址](http://www.modernizr.com/)
网站提供了一个自定义需求的工具来生成仅仅你需要的探测功能，而不是一个什么都可以探测的大而全的版本，就是说你可以让你的脚本最小化。
2. 引入<script src="modernizr.min.js" type="text/javascript">script>参考博客