提示：这里主要阐述浏览器兼容性产生的环境：

所谓的浏览器兼容性问题，是指因为不同浏览器对同一段代码有着不同的解析，所造成页面显示效果不统一的情况。 为此，解决浏览器兼容，也成为了跨浏览器开发的一个核心问题。 当初微软不加入W3C，使得后者不采用IE的方案，而在IE掉队，Chrome与Firefox崛起后，已经有大量开发者基于IE标准开发了大量的Web产品，让浏览器不得不用兼容模式来解决这一问题。再加上不同浏览器采用的内核不同，由于缺乏统一的开发标准，以及各大浏览器厂商为了凸显产品的特色，更是使得整个浏览器行业出现了百花齐放的状态。

在过去很长的一段时间里，跨浏览器开发、并解决浏览器的兼容问题，成为了前端开发者最为头疼却必须要解决的问题。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。 所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

提示：以下是本篇文章正文内容

前端开发人员检查浏览器兼容性的网站 Can I use（https://caniuse.com/）

浏览器引擎主要分为两种

所以浏览器兼容性问题一般指：css兼容、js兼容

因为不同浏览器对同一段代码有着不同的解析，所造成页面显示效果不统一的情况

1.addEventListener 与 attachEvent 区别

attachEvent ——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera。

addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

解决方案：

问题说明：

IE下，可以使用

Firefox 下，只能使用

解决方案：

统一使用

问题说明：

IE下，可以使用 () 或 [] 获取集合类对象； Firefox下，只能使用 [ ] 获取集合类对象。

解决方案：

统一使用 [] 获取集合类对象。

问题说明：

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性； Firefox下，只能使用getAttribute() 获取自定义属性。

解决方案：

统一通过 getAttribute() 获取自定义属性。

问题说明：

IE下，可以使用 eval(“idName”) 或 getElementById(“idName”) 来取得 id 为 idName的HTML对象； Firefox下，只能使用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

解决方案：

统一用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

问题说明：

IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能； Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。

解决方案：

使用 document.getElementById(“idName”) 代替 document.idName。 最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上 var 关键字，以避免歧义。

问题说明：

Firefox下，可以使用 const 关键字或 var 关键字来定义常量；IE下，只能使用 var 关键字来定义常量。

解决方案：

统一使用 var 关键字来定义常量。

问题说明：

IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。

解决方案：

不修改 input.type 属性。如果必须要修改，可以先隐藏原来的 input，然后在同样的位置再插入一个新的 input 元素。

问题说明：

window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的 event 只能在事件发生的现场使用。

解决方案：

在事件发生的函数上加上 event 参数，在函数体内(假设形参为 evt ) 使用var myEvent = evt?evt:(window.event? window.event:null)

代码示例：

问题说明：

IE下，event 对象有 x、y 属性，但是没有 pageX、pageY属性； Firefox下，event对象有pageX、pageY属性，但是没有 x、y属性。

解决方案：

如果考虑第8条问题，就改用 myEvent 代替 event 即可。

问题说明：

IE下，event 对象有 srcElement 属性，但是没有 target 属性； Firefox下，event 对象有target 属性，但是没有 srcElement 属性。

解决方案：

使用 srcObj = event.srcElement ? event.srcElement : event.target;

如果考虑第8条问题，就改用 myEvent 代替 event 即可。

问题说明：

IE或者Firefox2.0.x下，可以使用 window.location 或 window.location.href； Firefox1.5.x下，只能使用 window.location。

解决方案：

使用 window.location 来代替 window.location.href 。当然也可以考虑使用 location.replace()方法。

问题说明：

IE下，可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口； Firefox下则不能。

解决方案：

直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用 window.opener 来访问父窗口。 如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

以下面的 frame为例：

(1)访问 frame 对象IE：使用 window.frameId 或者 window.frameName 来访问这个 frame 对象； Firefox：使用 window.frameName 来访问这个 frame 对象；

解决方案：

统一使用 window.document.getElementById(“frameId”) 来访问这个 frame 对象； (2)切换 frame 内容在IE和Firefox中都可以使用 window.document.getElementById(“frameId”).src = “webjx.com.html” 或window.frameName.location = “webjx.com.html” 来切换 frame 的内容；如果需要将 frame 中的参数传回父窗口，可以在 frame 中使用 parent 关键字来访问父窗口。

问题说明：

IE下，使用 document.body.onload = inject; ， 其中 function inject() 在这之前已被实现； 在Firefox下，使用 document.body.onload = inject();

解决方案：

统一使用 document.body.οnlοad=new Function(“inject()”); 或者document.body.onload = function(){} [注意] Function 和 function 的区别

FireFox 支持，IE不支持。

解决方案：

IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数；

如下：

这种方法所有浏览器都支持

问题说明：

在IE下，使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点； 在FireFox下，使用obj.parentNode 访问 obj 的父结点。

解决方案：

因为FireFox与IE都支持DOM，因此统一使用 obj.parentNode 来访问 obj 的父结点。

问题说明：

innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行。

解决方案：

在非IE浏览器中使用 textContent 代替 innerText。

[注] innerHTML 同时被IE、FireFox等浏览器支持，其他的，如 outerHTML 等只被IE支持，最好不用。

问题说明：

IE、FireFox以及其它浏览器对于 table 标签的操作都各不相同， 在IE中不允许对 table 和 tr 的innerHTML 赋值，使用js 增加一个 tr 时，使用 appendChild 方法也不管用。

解决方案：

document.appendChild 在往表里插入行时FireFox支持，IE不支持解决方案：把行插入到 tbody中，不要直接插入到表解决方法：

[注] 建议使用JS框架集来操作 table，如JQuery。

问题说明：

FireFox中类似 obj.style.height = imgObj.height 的语句无效。

解决方案：

统一使用obj.style.height = imgObj.height + “px”;

FireFox支持(除了IE，现在所有浏览器都支持)，IE不支持

IE解决方案：

不用 setAttribute(“style”, “color : red;”)而用 object.style.cssText = “color: red;”(这写法也有例外)最好的办法是上面种方法都用上，万无一失

FireFox支持，IE不支持(指定属性名为 class，IE不会设置元素的 class 属性，相反只使用 setAttribute时IE自动识 classname 属性)

解决方案：

setAttribute(“class”, “styleClass”)setAttribute(“className”, “styleClass”)或者直接 object.className= “styleClass”;IE和FF都支持object.className。

解决方案：

这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有 IF-ELSE了万幸的是，IE可以识别出 document 的 uniqueID 属性，别的浏览器都不可以识别出这一属性。问题解决。

使用 hacker 可以把浏览器分为3类：

(1). IE6； (2). IE7和遨游； (3). 其他（IE8 Chrome ff Safari opera等）

详细分类及解决方案

（1）IE6认识的 hacker 是 下划线 _ 和星号 * （2）IE7和遨游认识的 hacker 是 星号 * 如： height:300px;*height:200px;_height:100px; （3）IE6浏览器在读到 height:300px的时候会认为高时 300px 继续往下读，他也认识 *heihgt ， 所以当IE6读到 *height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是 200px 。 继续往下读，IE6还认识 _height ,所以他又会覆盖掉 200px 高的设置，把高度设置为 100px 。 （4）IE7和遨游也是一样的从高度 300px 的设置往下读。当它们读到 *height:200px 的时候就停下了，因为它们不认识 _height 。 所以它们会把高度解析为 200px ，剩下的浏览器只认识第一个 height:300px ; 所以他们会把高度解析为 300px 。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

所有浏览器通用： height: 100px; IE6 专用： _height: 100px; 或者 *height: 100px; IE7 专用： *+height: 100px; IE7、FF 共用： height: 100px !important;

以下两种方法几乎能解决现今所有兼容：

（1） !important 随着IE7对 !important 的支持, !important 方法现在只针对IE6的兼容(注意写法，记得该声明位置需要提前)

(2)IE6/IE77对FireFox *+html 与 *html 是IE特有的标签，FireFox 暂不支持。而 *+html 又为 IE7特有标签。

将以下代码加入 Global CSS 中，给需要闭合的 div 加上 class=“clearfix” 即可，屡试不爽。

代码：

Firefox下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会(可用 !important 解决)

居中问题：

垂直居中将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle ( 注意内容不要换行） 水平居中： margin: 0 auto; (当然不是万能)

若需给 a 标签内内容加上 样式，需要设置 display: block; (常见于导航标签) Firefox 和 IE 对 BOX理解的差异导致相差 2px 的还有设为 float 的 div 在 ie下 margin 加倍等问题 ul 标签在 FF 下面默认有 list-style 和 padding 最好事先声明，以避免不必要的麻烦(常见于导航标签和内容列表) 作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden 以达到高度自适应

兼容页面的方法是：

每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

1. 不同浏览器的标签默认margin 和 padding 不同

问题说明：

随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。解决方案： CSS: *{margin: 0;padding:0;}

2. 块属性标签 float 后，又有横行的 margin 情况下，在IE6显示 margin 比设置的大

问题说明：

常见症状是IE6中后面的一块被顶到下一行（ float 布局最常见的浏览器兼容问题）

解决方案：

在 float 的标签样式控制中加入 display:inline; 将其转化为行内属性备注：我们最常用的就是 div+CSS 布局了，而 div就是一个典型的块属性标签，横向布局的时候我们通常都是用 div float 实现的，横向的间距设置如果用 margin 实现，这就是一个必然会碰到的兼容性问题。

3. 较小高度标签（一般小于 10px ）问题

问题说明：

IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度解决方案：给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

4. 行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6间距 bug

问题说明：

IE6里的间距比超过设置的间距

解决方案：

在 display:block; 后面加入 display:inline;display:table;备注：行内属性标签，为了设置宽高，我们需要设置 display:block; (除了 input 标签比较特殊)。在用 float 布局并有横向的 margin 后，在IE6下，他就具有了块属性 float 后的横向 margin 的 bug 。不过因为它本身就是行内属性标签，所以我们再加上 display:inline 的话，它的高宽就不可设了。这时候我们还需要在 display:inline 后面加入 display:talbe 。

5. 图片默认有间距

问题说明：

几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：

使用 float 属性为 img 布局备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。

6. 标签最低高度设置 min-height 不兼容

问题说明：

因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容解决方案：如果我们要设置一个标签的最小高度 200px ，需要进行的设置为：

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

7. CSS 布局中的居中问题

问题说明：

首先在父级元素定义 text-align: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法：在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto;

8. IE浮动产生的双倍距离

这里细说一下 block， inline 两个元素Block元素的特点是：总是在新行上开始，高度、宽度、行高、边距都可以控制(块元素)Inline 元素的特点是：和其他元素在同一行上，不可控制(内嵌元素)

9. IE与宽度和高度的问题

IE不认得 min- 这个定义，但实际上它把正常的 width 和 height 当作有 min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。

解决方案：

要解决这个问题，可以这样：

10. 页面的最小宽度

min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个