[TOC] ## 兼容性 ### 为什么会有浏览器兼容问题 * 同一浏览器，版本越老 bug 越多 * 同一浏览器，版本越新，支持的特性越多 * 不同浏览器，标准不同，实现方式也有差异 ## 渐进增强和优雅降级 * 渐进增强\(progressive enhancement\): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验 * 优雅降级\`\(graceful degradation\): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 ### 具体方法 IE条件注释 \(conditional comment\) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注意：只有 IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为 是普通注释。 ``` <!--[if IE 6]> <p>IE6下 这句生效，在其他浏览器下认为是普通注释</p> <![endif]--> <!--[if !IE]><!--> <script>alert("在 IE 下条件语法生效，但script不执行。在非 IE 下上下两句都被当做注释所以当前 script 会执行");</script> <!--<![endif]--> <!--[if IE 8]> <link href="ie8only.css" rel="stylesheet"> <![endif]--> ``` 使用了条件注释的页面在ie9 及以前 中可正常工作，但在ie10 以后不再支持。 CSS hack是利用浏览器遗留 bug 的原理来识别旧的浏览器。 ``` .box{ color: red; _color: blue; /*只有ie6认识*/ *color: pink; /*只有ie67认识*/ color: yellow\9; /*ie浏览器都能识别*/ } ``` 以下是一些常见属性的兼容情况 * inline-block: &gt;=ie8 * min-width/min-height: &gt;=ie7 * :before,:after: &gt;=ie8 * div:hover: &gt;=ie7 * inline-block: &gt;=ie8 * background-size: &gt;=ie9 * 圆角: &gt;= ie9 * 阴影: &gt;= ie9 * 动画/渐变: &gt;= ie10 ``` <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> ``` ## 一些和兼容相关的工具/库 * [html5shiv](https://zhuanlan.zhihu.com/html5shiv) * [Respond.js](http://link.zhihu.com/?target=https%3A//github.com/scottjehl/Respond) * [CSS Reset](http://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000003021766) * [normalize.css](http://link.zhihu.com/?target=https%3A//github.com/necolas/normalize.css) * [Modernizr.js](http://link.zhihu.com/?target=https%3A//github.com/Modernizr/Modernizr) * [postcss](http://link.zhihu.com/?target=https%3A//github.com/postcss/postcss) ## 用到的网站 * [浏览器市场份额 - 百度统计流量研究院](http://link.zhihu.com/?target=http%3A//tongji.baidu.com/data/browser) * [caniuse.com](http://link.zhihu.com/?target=http%3A//caniuse.com/) 查CSS属性兼容 * [Browserhacks](http://link.zhihu.com/?target=http%3A//browserhacks.com/) 查 Hack 的写法