饥人谷Wiki

# 聊一聊浏览器兼容

## 什么是兼容问题

同一份代码，有的浏览器效果『正常』，有的『不正常』

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 的原理来识别旧的浏览器。

```text .box{

color: red;
_color: blue; /*只有ie6认识*/
*color: pink; /*只有ie67认识*/
color: yellow\9;  /*ie浏览器都能识别*/

} ```

以下是一些常见属性的兼容情况

- inline-block: >=ie8 - min-width/min-height: >=ie7 - :before,:after: >=ie8 - div:hover: >=ie7 - inline-block: >=ie8 - background-size: >=ie9 - 圆角: >= ie9 - 阴影: >= ie9 - 动画/渐变: >= ie10

一些兼容写法范例

```text .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> <html class="no-js">

  

## 一些和兼容相关的工具/库

- [html5shiv](https://link.zhihu.com/?target=https%3A//github.com/scottjehl/Respond)  
- [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)  

  

特别是[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) 很有实践价值，值得好好看看用法。

## 用到的网站

- [浏览器市场份额 - 百度统计流量研究院](https://link.zhihu.com/?target=http%3A//tongji.baidu.com/data/browser)  
- [caniuse.com](https://link.zhihu.com/?target=http%3A//caniuse.com/) 查CSS属性兼容  
- [Browserhacks](https://link.zhihu.com/?target=http%3A//browserhacks.com/) 查 Hack 的写法  

  

  



> 饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助数千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么在内的国内外大小企业。 了解培训课程：加微信 [xiedaimala03](https://wiki.jirengu.com/lib/exe/fetch.php?w=400&tok=5c45ca&media=%E9%A5%A5%E4%BA%BA%E8%B0%B7%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E5%B0%8F%E5%8A%A9%E7%90%86black.png)，官网:https://jirengu.com

> 本文作者：饥人谷若愚老师

饥人谷Wiki

站点工具

用户工具

目录

页面工具