炒冷饭12

用到的网站
浏览器市场份额
caniuse.com 查CSS属性兼容
browserhacks 查 Hack 的写法

处理兼容问题的思路
要不要做产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)

做到什么程度让哪些浏览器支持哪些效果

如何做根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补

处理兼容问题的手段

1. 合适的框架
   Bootstrap (>=ie8)
   jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
   Vue (>= ie9)
   ...

2. 条件注释
   条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

   
   
   

使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。
条件注释
项目 范例 说明
！ [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

3. CSS hack
   常见hank写法
   .box{
   color: red;
   _color: blue; /ie6/
   color: pink; /ie67/
   color: yellow\9; /ie/edge 6-8*/
   }
   
   
   

常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10

常见兼容处理范例

1. 案例

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

2. 案例

.target{
display: inline-block;
*display: inline;
*zoom: 1;
}

3. 案例

参考文章
css reset