前言

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

一、浏览器的四大内核

二、兼容性问题

（一）什么是兼容问题？

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

（二）页面不统一的原因是什么？

不同的浏览器使用了不同的内核，处理同一件事情的思路不同。

（三）为什么会出现兼容性问题？

• 同一浏览器，版本越老，相对于版本越新的浏览器，对新属性和标签、新特性的支持就越少
• 不同浏览器使用了不同的核心技术，标准不同，实现方式也有差异，最终呈现出来的效果也会有差异
• 开发人员技术参差不齐，写出的代码不够规范，使得不兼容的现象更加突出

从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：

• 渲染相关：和 样式 相关的问题，即体现在布局效果上的问题。
• 脚本相关：和 脚本 相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
• 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

三、解决方法

Can I use，一个针对前端开发人员定制的一个查询CSS、JS、HTML5、SVG在主流浏览器中的特性和兼容性的网站，有了这个工具我们就可以快速地了解到代码在各个浏览器中的兼容性情况，可以很好的保证网页在浏览器中的兼容性。

JavaScript兼容问题及解决方案

下面列举部分情况

1.addEventListener与attachEvent

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

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

解决方法：

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) { // W3C标准
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) { // IE
    var r = elm.attachEvent('on' + evType, fn); // IE5+
    return r;
  } else {
    elm['on' + evType] = fn; // DOM事件
  }
}

2.document.formName.item("itemName")

IE下，可以使用document.formName.item("itemName")或者document.formName.elements ["elementName"]。

Firefox下，只能使用document.formName.elements ["elementName"]。

解决方法：

document.formName.elements["elementName"]

3.变量名与某HTML对象ID相同

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

Firefox下，可以使用与HTML对象ID相同的变量名，IE则不能

解决方法：

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

4.window.event

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

解决方法：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript"> 
  // 在事件发送的函数上加上event参数
  function doSomething(evt) {
  var myEvent = evt ? evt :(window.event ? window.event : null);
  …
 }
</script>

5.window.location.href

IE或者Firefox2.0.x下，可以使用windox.location或者window.location.href。

Firefox1.5.x下，只能使用windox.location。

解决方法：

使用windox.location来代替window.location.href，或者使用location.replace()方法。

6.用setAttribute设置事件

var obj = document.getElementById("objId");
obj.setAttribute("onclick", "funcitonname()");

Firefox支持，IE不支持

解决方法：

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

var obj = document.getElementById("objId");
obj.onclick= function(){ fucntionname(); };

CSS兼容问题及解决方案

下面列举部分情况

1.CSS Hack

CSS Hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。

.hack{
 width:300px;
 _width:200px;
}

一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

浏览器识别字符标准对应表

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。如当一个浮动元素设置了外边距时，margin属性在IE6中显示的距离会比其他浏览器中显示的距离宽2倍。所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：

.margin{
  margin-left:20px;
  _margin-left:20px;
}

2.float 闭合

将以下代码加入 Global.CSS 中，给需要闭合的 div 加上 class="clearfix" 。

<style>
/* Clear Fix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
    display:block;
}
/* End hide from IE Mac */
/* end of clearfix */
</style>

3.兼容代码：兼容最推荐的模式

/* FF */
.submitbutton {
    float: left;
    width: 40px;
    height: 57px;
    margin-top: 24px;
    margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
    margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
    margin-top: 21px;
}

4.标签最低高度设置min-height

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

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

总结

为什么在移动互联网时代、APP已经动摇了浏览器市场地位的当下，谷歌、微软、苹果和Mozilla又要携手来解决这一问题呢？其实这是因为导致浏览器兼容性问题的历史包袱，现在已经不存在了。微软的IE11以及Edge已经彻底“寿终正寝”了，同时Mozilla的Firefox市场份额已不到4%，Opera浏览器更是放弃了自己的Presto内核、改用Webkit内核，并且Webkit内核也基本上已经一统整个市场了。至于说，谷歌与Opera合力研发的Blink内核，则是Webkit内核的硬分叉产物，两者拥有同一个源流。

换句话来说就是，当初浏览器兼容性问题的出现，是因为浏览器厂商太多、浏览器内核太多，各家的标准让开发者无所适从。但现在随着微软Edge加入谷歌的Chromium生态、Firefox式微，以及苹果Safari圈地自萌，开放的生态让Chromium的标准成为了全球开发者都在遵循的行业标准。

简单来说，就是Chromium生态在事实上已经垄断了浏览器市场，只需要4家厂商就可以制定浏览器的事实标准了。