在了解兼容问题之前，先了解下浏览器的内核。浏览器最重要或者说核心的部分是“Rendering Engine”，可翻译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。作用是负责对网页语法的解析并渲染（显示）网页。不同的浏览器内核对网页编写语法的解析不一样，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页开发人员需要在不同内核的浏览器中测试网页显示效果的原因。常见的浏览器内核有:Trident (IE内核) 、Gecko(Firefox内核) 、Presto(Opera前内核,已废弃,Opera现已改用Google Chrome的Blink内核) 、Webkit(Safari内核,Chrome内核原型,开源) 、Blink(Blink是一个由Google和Opera Software开发的浏览器排版引擎)。

简单来说，浏览器兼容的问题的出现，是以下原因造成的：1、由于浏览器是各个厂家开发的，所用内核（以上已经讲过）与核心架构和代码不同。2、出于对自身的利益的考虑，而设置的种种技术壁垒。

比如，同一段代码在不同的浏览器中有不同的解析，会造成页面显示效果不统一。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。当然浏览器兼容不仅仅指的是css样式的解析不一样，还有很多js兼容问题，今天只说css兼容问题。但幸运的一点儿是，随着技术发展，浏览器标准的慢慢统一，兼容问题会越来越少，这一点儿对于开发人员来可以说是福音。

问题1：不同浏览器的标签默认的外补丁和内补丁不同。比如，随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方法：在CSS里开始使用*通配符直接清除padding和margin的值为0;

问题2：图片默认有间距。比如，几个img标签放在一起的时候，有些浏览器会有默认的间距。还有容器没有设置高度的情况下，图片会默认把底部撑大几像素。

解决方法:直接使用浮动属性。或使用vertical-align:top;

问题3：透明属性在IE浏览器下不兼容。

解决方法：

IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100);

兼容其他浏览器写法：opacity:0.value;(value的取值范围

0-1 0.1,0.2,0.3-----0.9---1)

问题4：图片在IE浏览器上有蓝色的边框，条件是图片加在a标签里时产生。

解决方法: img{border:0;}

问题5：表单元素距离顶部间距不一致。

解决方法:给表单元素添加声明：float:left;

问题6：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

解决方法: 给右面的浮动元素添加声明：clear:right;