说到兼容性，是最让前端开发人员头痛的问题。同是一段代码，在不同的浏览器上显示的效果不同，轻者某些效果没有出来，重者乱成一锅粥。看着自己码了几天的代码到浏览器上却乱成一团，是不是突然之间感觉心很累。下面就兼容问题归纳了三种解决的方式，以后遇到了兼容性问题从这几个方面考虑就差不多了。
　　首先介绍下浏览器的两种模式也就是浏览器解析css的两种方式，quirks mode(怪异模式)和(标准模式static mode)，因为在早期各大浏览器厂商竞争，所以在浏览器解析页面时并未遵循W3C标准，但随着互联网的发展，W3C的标准越来越重要，现在大部分浏览器厂商都遵循W3C的标准，这种标准模式就称为，而以前的模式称为quirks mode，典型的就是IE7-。

对于上面的问题，我们有第一种方式：

一、代码或代码声明解决。

1、<!DOCTYPE>声明，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，规定了浏览器的解析模式，现在几乎忽略。
2、<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。例如360浏览器：<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>可以指定360浏览器用哪种内核解析页面文档。例如IE浏览器：<meta http-equiv="X-UA-Compatible" content="IE=IE8"/>可以指定IE浏览器用IE8的mode解析页面文档。
3、前后缀代码，对不同内核的浏览器在具体样式前加上该内核标志前缀，例如：

1
2
3
4
5
6
7
8
display: flex;

display: -webkit-box;   /*兼容webkit内核浏览器，如chrome,safari*/

display: -webkit-flex;  /*兼容webkit内核浏览器，如chrome,safari*/
display: -moz-box;    /*兼容mozilla内核浏览器，如：Firefox*/

display: -ms-flexbox;  /*兼容Trident内核浏览器，如：IE*/

其实css的hack也有类似的味道，且把它归到下面来讲。

二、工具插件解决。

1、ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使 得透明PNG在IE5、IE6下正确显示。例如：<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>，它有7/8/9三个版本，不过对了国内的网络环境，也可以几乎忽略。
2、css3pie是一个css3的样式生成工具，官方http://css3pie.com/，可以在里面设置你想要的css3样式，然后show css会显示很全的代码，可兼容firefox , ie6 , ie7 , ie8。