# 聊一聊浏览器兼容
## 什么是兼容问题
同一份代码,有的浏览器效果『正常』,有的『不正常』
1. 不正常的原因是什么?\(不支持\? bug?\) 2. 如何让它展示正常\?\(条件注释? 单独Hack?\)
## 为什么会有浏览器兼容问题
1. 同一浏览器,版本越老 bug 越多 2. 同一浏览器,版本越新,支持的特性越多 3. 不同浏览器,标准不同,实现方式也有差异
## 处理兼容问题的思路
- 要不要做
- 做到什么程度
- 让哪些浏览器支持哪些效果
- 如何做
- 根据兼容需求选择技术框架/库\(如jquery 1.x.x\) - 根据兼容需求选择兼容工具:[html5shiv](https://zhuanlan.zhihu.com/html5shiv)、[Respond.js](https://link.zhihu.com/?target=https%3A//github.com/scottjehl/Respond)、[CSS Reset](https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000003021766)、[normalize.css](https://link.zhihu.com/?target=https%3A//github.com/necolas/normalize.css)、[Modernizr.js](https://link.zhihu.com/?target=https%3A//github.com/Modernizr/Modernizr)、 [postcss](https://link.zhihu.com/?target=https%3A//github.com/postcss/postcss) - 条件注释、CSS Hack、js 能力检测做一些修补
## 渐进增强和优雅降级
- 渐进增强\(progressive enhancement\): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验 - 优雅降级\`\(graceful degradation\): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
## 具体方法
IE条件注释 \(conditional comment\) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码,注意:只有 IE9以下的浏览器才能识别这种语法,其他浏览器仅仅认为 是普通注释。
```html
<!--[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浏览器都能识别*/ }
以下是一些常见属性的兼容情况
动画/渐变: >= ie10
一些兼容写法范例
.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 仅对ie67有效,zoom:1触发hasLayout,起到类似BFC的效果 */ } .target{ display: inline-block; *display: inline; /*仅对ie67生效*/ *zoom: 1; /*仅对ie67生效*/ } <!--[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]--> <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html class="no-js"><!--<![endif]-->
特别是Modernizr.js 和 postcss 很有实践价值,值得好好看看用法。
Browserhacks 查 Hack 的写法
饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助数千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com
本文作者:饥人谷若愚老师