浏览器兼容（转）

浏览器兼容

首先浏览器有很多种，每种浏览器会存在一定的差异，其次每个浏览器都有不同的版本，版本之间也存在必然的差异，而我们做出来的页面则需要各个浏览器以及不同版本表现一致，所以必然存在兼容问题。

一般来说兼容问题我们可以分两步走：第一步是确定浏览器是否支持，第二步是如果表现不一致，怎么去修复。

浏览器是否支持

技术总是在不断改进和发展的，新的东西一出来，那老的一些版本浏览器可能就不支持了。就如我们手机的发展，总不能让以前的功能机安装我们智能机的 APP 吧。

一般来说，由于技术的不断改进和发展，大概存在以下几种问题：

• 新技术在老版本的浏览器总是不支持的（如ie8以下对 CSS3 支持几乎是空白）
• 由于新技术刚出现时，可能还没有完全定稿标准化，所以各个新浏览器一般都是先试探性的使用前缀的办法使用
• 同样的技术在不同的浏览器上可能表现也不一样。

对于这些问题，我们可以查阅 Can I use ，里面提供了各种浏览器支持情况。

以 CSS 的 flexbox 为例，我们在搜索框输入关键词”flexbox”，下面就显示了其对应的浏览器支持情况，为了更加清楚了解，还可以点击图表左上角的按钮“show all”展开更多浏览器版本查看。

在查阅 Can I use 的时候，我们可以看到有些版本的右上角标有-符号，这就标识该版本得使用前缀，目前我们常见的前缀有-webkit（webkit内核浏览器）、-ms（ie/edge）、-moz（火狐浏览器）

这里以圆角（border-radius）为例说明下前缀用法（当然现在圆角已经不需要写前缀了）：

.box {
 -webkit-border-radius: 5px; /* webkit内核浏览器（chrome、safari） */
 -moz-border-radius: 5px; /* 火狐浏览器 */
 border-radius: 5px; /* 标准语法 */
}

注：我们课程中的所有的代码都不会考虑前缀问题，但是不用担心，后面的自动化构建课程中，我们会介绍使用 autoprefix 来自动处理这些前缀问题。

如何针对修复

如果问题出现了，我们怎么针对某些浏览器进行特定的修复而不影响到其他正常的浏览器。

这个时候就可以参考各个浏览器hack详细，里面提供了针对各种浏览器单独写样式的很多方法（不一定所有办法都可以，但是你可以挑选一个可以的）

以修复 IE6、7 不兼容 inline-block 为例，我们挑选一条如下在属性前面加*的修复：

最终代码如下：

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