浅聊常见浏览器的兼容性问题

前言

浏览器的兼容性问题是个很庞大复杂的问题，很难找到四海皆准的办法，这里我们只是简单介绍下几种经典的处理兼容性问题的方法。

浏览器兼容问题

一、什么是浏览器的兼容性问题

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

二、为什么会有兼容性问题

主要原因有以下三个方面：

• 同一产品，版本越老，bug越多

• 同一产品，版本越新，功能越多

• 不同产品，不同标准，不同实现方式

三、处理兼容性问题的思路

思路1：从产品的角度

• 首先了解产品的受众，比如是面向年轻群体，还是面向政府或单位部门
• 然后查询受众的浏览器比例，可以通过浏览器市场份额网站
• 再者确定效果优先还是基本功能优先
  渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

思路2：从产品实现难度和开发成本——是否值得做

四、如何处理兼容性问题

首先我们先查阅CSS属性兼容，可以得到该css属性在目标浏览器是否兼容，如下图所示一些常见的css属性兼容性：

常见css属性兼容性

1、根据兼容需求选择技术框架／库（jquery）

常见js库的兼容性

2、根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）

• HTML5Shiv——让 IE 6-8 支持 HTML5 标签并添加默认样式
• respond.js——让 IE 6-8 支持 min/max-width CSS3 媒体查询。注意： 引用 respond.js 的