前端浏览器兼容性问题

一、前言

• 在前端开发过程中我们不可避免地会遇到浏览器兼容性问题，这也是我们必须要解决的问题，首先我们来了解一下问什么会出现浏览器兼容的问题。
• 现在市场上有很多类的浏览器，不通类型的浏览器内核也不同，所以浏览器对代码的解析会出现差异，这就导致页面渲染不统一的问题。
• 市场上常见的浏览器内核有四种webkit内核、presto内核、trident内核、gecko内核
• 

二、常见的浏览器兼容性问题及解决方法

• 常见的浏览器兼容问题可分为三类
  HTML兼容、css兼容、JavaScript兼容
  对于HTML兼容这是由于低版本的浏览器无法识别高版本浏览器所使用的标签，从而导致无法识别的问题，比如HTML5新增的标签，这类兼容性问题比较容易处理。
  1、CSS兼容
  问题一：不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同。
  问题表现：标签在不加样式的情况下外补丁和内补丁存在差异。
  解决方法：在css里添加如下代码

*{
  margin: 0;
  padding: 0;
}

问题二：IE6下margin值双倍边距问题
问题表现：IE6下元素浮动后margin值编变成双倍
解决方法：将元素转为行内属性

{
  display: inline;
}

问题三：height设置过小问题
问题表现：IE6、IE7下设置标签高度小于10px，存在超出已设置的高度的问题
解决问题：为超出高度的元素添加超出部分隐藏

{
   overflow: hidden;
}

问题四：标签min-height属性不兼容问题
问题表现：min-height属性本身就是一个不兼容CSS属性，所以min-height不能很好地被各个浏览器兼容
解决方法：例如要为一个标签设置最小高度为200px

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

问题五：图片元素img下默认有间距
问题表现：IE6下图片元素img出现多余空白
解决方法：图片使用float属性

问题六：opacity多浏览器透明度兼容问题
问题表现：opacity是css3里的属性，只有部分浏览器支持
解决方法：使用各个浏览器的私有属性以支持opacity

{
  filter: alpha(opacity=50);/*IE*/
  -moz-opacity: 0.5;/*老版Mozilla*/
  -khtml-opacity: 0.5;/*老版Safari*/ 
  opacity: 0.5;
}

问题七：Firefox和Chrome不兼容cursor:hand
解决方法：cursor:poniter兼容所有浏览器

问题八：IE6的3px Bug
问题表现：一个标签浮动，另一个不浮动的元素自然上浮与之靠近出现3px间距
解决方法：对浮动的标签设置_margin-right: -3px;

{
  _margin-right: -3px;
}

2、JavaScript兼容性

1. 标准的事件绑定方法函数为addEventListener,单IE下事attachEvent。
2. 事件的捕获方式不一致，标准的浏览器事由外至内、二IE事由内至外，但最后的结果是将IE的标准定制为标准。
3. window.event获取的，并且获取目标元素的方法也不同，标准浏览器是event.target而IE下是event.srcElement.
4. 在低版本的IE中获取的日期处理函数的值不是与1900的差值，但在高版本的IE与标准浏览器保持了一致，获取的值也是与1900的差值。比如

var year = new Date().getYear();

5. ajax的实现方式不同，这个我所理解的是获取XMLHttpResquet的不同，IE下是activeXObject
6. IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
   其他浏览器：parentNode parentNode.childNodes
   IE：parentElement parentElement.children