浏览器兼容问题及解决方法汇总（持续更新......)

一、出现兼容问题的原因：

浏览器种类很多，但是区别主要在浏览器内核的不同，所以各内核对网页的解析差异，是导致浏览器兼容问题出现的主要原因。关于浏览器内核（browser kernel)，是浏览器最为核心的部分，可以分为两部分，一部分是渲染引擎（render engineer或layout engineer)，方负责生成DOM树，render，repaint这些工作；另一部分是JS引擎，负责JS的解释执行。它的存在，决定了网页的呈现的内容、格式以及效果。所以，好用的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核。

目前主流的四大浏览器内核有 Trident 、 Gecko 、WebKit （Chromium（Blink，V8）），Presto ，其中chromium是webkit分支出来的。

列举一些内核下的代表浏览器

Trident：IE、Maxthon、TT；

Gecko：Netcape6及以上版本、FireFox；

Presto：Opera7及以上版本；

Webkit：Safari、Chrome。

国内的浏览器（诸如360，QQ，搜狗）大多数用了第三方的内核，区别只在于外观和功能性差异。（有些浏览器是双核模式，标准模式下是chrome的内核，兼容模式下是IE的内核）。

二、兼容问题分类（HTML部分 , CSS样式的兼容性 , JS的兼容性）

1、HTML兼容问题是因为高版本浏览器用了低版本浏览器无法识别的元素，导致不能解析。特别是HTML5增加了许多新标签。所以在开发的时候首先明确项目要兼容哪些浏览器的最低版本，比如项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了最基本的要求，在开发中就需要考虑到CSS样式和JS代码在这些浏览器的兼容性了。

（1）解决H5新标签在IE9以下的浏览器不识别问题（html5shiv.js下载地址：https://github.com/aFarkas/html5shiv/releases）

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

（2）不同浏览器的标签默认的内边距和外边距不同

一般会在共用CSS中预设样式，如

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select

{margin:0;padding:0}

或者使用通配符 * ，一般不建议这样简单粗暴，不严谨哈哈

*{margin:0;padding:0}

2、CSS 样式的兼容问题 CSS hack和filter原理：（1）利用浏览器自身的bug来实现特定浏览器的样式(2)利用浏览器对CSS的完善度来实现。

（1）IE条件注释 （仅仅针对IE浏览器，对其他浏览器无效）

例如下面的语法：

（2）属性过滤器（较为常用的hack方法）----转载

针对不同的IE浏览器，可以使用不同的字符来让特定的版本的IE浏览器进行样式控制。

至于一些的关于属性选择器的过滤的方法这边就不再介绍了，因为这些都没有必要了，我想不到还有哪些丧心病狂的项目会要求兼容到IE6以下或者更低的了！

（3）IE6双边距

行内属性设置了块级属性（display: block;）后，会产生双倍边距。
解决方案是在添加一个 display: inline; 或者 display: table;

（4）双倍margin

浮动元素设置了margin在IE6下会产生双倍margin。
解决办法：只要给浮动元素转行级设置 display: inline;或者使用IE6的hack：_margin；

（5） 盒模型差异

W3C标准盒模型： margin 、border、 padding、 content；元素宽高是content的宽高。

IE盒模型：margin 、 content（包含border、padding）；元素的宽高也是content，里面有边框和内填充。

使用CSS3中的box-sizing的属性：content-box(默认状态，标准盒模型)； border-box（IE盒模型）。

（6）img标签-图片存在边距

在不同浏览器下图片下面会出现莫名的下边距，经测算在FF中下边距大概是多出了3像素左右。

解决方法：

1.将img块状化display：block;

2.将img设置浮动 float：left

3.为img添加样式 vertical-align:top|bottom|text-top|text-bottom;注：定义vertical- align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。

4.为img的父级加高度 height

5.为img的父级加样式 font-size:0;需要考虑父级中的文字大小。

(7）min-height的兼容写法（没用过）

.divBox{
  min-height:200px;
  height:auto !important;
  height:200px;
  overflow:visible;
}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如200px）时。容器的高度为200px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。为了样式不被破坏，这时候我们就会面临这个兼容性问题。

(8)IE6最小宽度

IE6没有min-width的概念，如想设置，可以解决.

.box{
        min-width:600px;
	_width: expression(document.body.clientWidth < 600? "600px":"auto");
}

用上述js代码解决，里面用了"_"是IE6的hack方法，同样IE7的是"*"。

(9).a标签CSS顺序

被点击过后的超链接不再具有hover和active属性，会疑惑为什么写的样式没有效果，其实只是写的样式被覆盖了，正确的a标签顺序应该：

link
visited
hover
active

（10） IE6 高度无法小于10px

添加overflow的属性：overflow:hidden
设置font-size的属性为高度的大小
line-height属性设置为高度大小

3、JS的兼容问题（主要是原生JavaScript代码，其实现在有了前端框架和各种库已经帮我们解决了各种兼容问题）

（1）标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；