常见浏览器兼容性问题及解决方案

所谓浏览器兼容性问题，是指不同浏览器对同一段代码有不同的解析，导致页面产生的效果不一样。大多数情况下良好的用户体验需求应该是不同浏览器显示的页面都是相同的，因此，对于web开发来说，浏览器兼容性问题是一件令人头痛的事情，因此我们在编码之前应该先了解不同浏览器之前都有什么区别，然后在编码过程中针对浏览器的兼容问题作出相应的对策，规避经常出现兼容性问题的代码。

在众多浏览器中IE6是最令人讨厌的了，因为他的兼容性问题最差，下面先介绍IE6中常见的BUG及解决办法。

1、  IE6双边距BUG

BUG描述：当页面元素采用float浮动时，无论是向左还是向右浮动，只要该元素带有margin像素，该值的实际显示效果都会把该值乘以2。

解决方法：在该元素中加入display:inline 或 display:block 明确其元素类型即可。

2、 IE6中奇数宽高的BUG

BUG描述：IE6中奇数宽高与偶数宽高显示大小有一定的不同。

解决方法：尽量将外部定位的div高宽写成偶数即可。

3、 IE6中图片链接的下方有间隙

BUG描述：IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。

解决方法：将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0。

4、  IE6中3像素

BUG描述：当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。

解决方法：使布局在同一行的元素都加上float浮动。

 其他浏览器常见兼容性问题   

1、 不同浏览器的标签默认的外补丁和内补丁不同

问题描述：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方法：CSS里    *{margin:0;padding:0;}，不过最好是把常用的标签添加此属性，不要使用全部属性设置。

2、设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度。

问题描述：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度。

解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

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

问题描述：IE6里的间距比超过设置的间距。

解决方法：在display:block;后面加入display:inline;display:table。