网站：caniuse.com
browserhacks
tongji.baidu.com/data/browser

浏览器兼容问题

同一份代码，有的浏览器效果正常，有的不正常
不正常的原因是什么？(不支持，bug)
如何让它展示正常?(条件注释 单独hack)

同一产品，版本越老bug越多
同一产品，版本越新，功能越多
不同产品，不同标准，不同实现方式

要不要做：
产品的角度 （产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度（有无必要做某件事）

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

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

渐进增强和优雅降级

渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进
行效果、交互等改进和追加功能达到更好的用户体验

优雅降级(graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

1.合适的框架

1.Bootstrap(>=ie8)
2.jQuery 1.~(>=ie6)  jQuery 2.~(>=ie8)
3.Vue(>=ie9)
4. ...

2.条件注释(conditional comment)是

HTML源码中被IE有条件解释的语句。
条件注释可被用来向IE提供及隐藏代码

<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]>

使用了条件注释的页面在 ie9中可正常工作
ie10中无法不行 ie10不再支持条件注释

条件注释.png

3.CSS hack

由于不同厂商的浏览器，比如IE Chrome Safari Firefox Mozilla等，
或者同一厂商的浏览器的不同版本，比如IE6和IE7 对CSS的解析认识
不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要
的页面效果
这个时候我们就需要针对不同的浏览器去写不同的css，让它能在
不同的浏览器中也能得到我们想要的页面

CSSHack大致有三种表现形式：css属性前缀法 选择器前缀法 IE条件注释法
(即HTML头部引用if IE)Hack，实际项目中CSS hack大部分是针对IE浏览器
不同版本之间的表现差异而引入的
1.属性前缀法(即类内部Hack): 例如IE6能识别下划线 "" 和"", IE7能识别""
但不能识别下划线"", IE6~IE10都认识"\9", 但firefox上述三个都不认识
2.选择器前缀法(即选择器Hack)
3.IE条件注释法(即HTML条件注释Hack): 针对所有IE(注: IE10+已经不再支持条件注释):
针对IE6及以下版本:
这类Hack不仅对CSS生效 对写在判断语句里面的所有代码都会生效

6BDC9B80-AF07-403B-A3A4-6A5A3F3B1674.png