前端浏览器兼容性问题

一、前言

在前端开发的过程中我们不可避免的会遇到浏览器兼容性问题，这也是我们必须要解决的问题。首先来了解一下为什么存在浏览器兼容性问题。

现在的市场上有很多种类的浏览器，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。

市场上常见的浏览器内核主要有四种：Webkit内核、Presto内核、Trident内核、Gecko内核。

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

问题一：不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同

问题表现：标签在不加样式的情况下外补丁(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;
}