在说到常遇到的兼容问题及解决办法之前，先来简单了解一下五大浏览器及其内核是什么。
1、Trident内核：代表作品是IE
2、Gecko内核：代表作品是Firefox，即火狐浏览器。
3、Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。
4、Presto内核：代表作品是Opera。
5、Blink内核：由Google和Opera Software开发的浏览器排版引擎。
下面我们来说说常遇到的浏览器兼容问题：
1、图片间隙
解决办法：1）将<div>与<img>写在一行上
2）将<img>转换为块元素，即给<img>添加声明：display:block；
2、dt，li图片间隙，图片将div撑大3px
解决办法：将<img>转换为块元素，即给<img>添加声明：display:block；
3、默认高度，低于16px就无法正常显示
解决办法：1）给元素添加声明：font-size:0;
2）给元素添加声明：overflow:hidden;
4、双倍浮向（双倍边距），错误将浮向边界加倍显示
解决办法：给浮动元素添加声明：display:inline;
5、表单元素行高不一致
解决办法：给表单元素添加声明：float:left;
6、按钮元素默认大小不一致
解决办法：1）统一大小，可用a标签模拟
2）input外边套一个标签，在标签里面写样式，吧input边框去掉
3）若按钮是图片，可将图片作为按钮背景图片
7、百分比bug，在IE6一下版本中解析百分比时，会按四舍五入的方式计算，从而导致50%+50%>100%
解决办法：给右边元素添加声明：clear:right; clear:left; clear:both;
8、按钮解析边框时会把边框解析在内部，但不会影响按钮原有的大小
9、鼠标指针bug，cursor属性的hand属性值只在IE识别，cursor属性的pointer属性值在IE6及以上版本识别
解决办法：统一鼠标形状为手形，即添加声明：cursor:pointer;
cursor常用样式可自行查询，这里就不多说了
10、透明属性
IE8以下写法：filter:alpha(opacity=value);/*value取值范围为1-100*/
其他浏览器兼容写法：opacity:value;/*value取值范围为0.1-1*/
11、列表阶梯bug，列表阶梯通常会在给li子元素a标签使用float:left;时触发，在IE6及以下版本会出现垂直或阶梯状
解决办法：给父元素设置浮动属性即可
12、在IE6及以下版本想去掉input默认边框，设置：border:0;即可
13、li标签的面的a标签设置display:block;后悔出现行高不一致
解决办法：给li设置浮动属性，并将li宽度等于父元素宽度
14、子元素没设置任何浮动，但设置了margin-top属性后，会错误的把margin-top属性加给父元素（这是标准浏览器的问题）
解决办法：给父元素添加声明：overflow:hidden;
15、在IE6中隐藏元素，如添加display:none;的元素被包含在浮动元素里，可能会引发文本重复bug
解决办法：给浮动元素添加：display:inline;
16、若要给元素定义100%宽高度，必须明确它的父级元素为100%；若要定义满屏高度，就先给html和body定义height：100%；
17、浮动元素高度自适应（父元素不写高度时，子元素写浮动后，父元素高度会发生高度塌陷）
解决办法：1）给父元素添加声明：overflow:hidden;
2）在浮动元素下方添加空div，并给元素添加声明：clear:both;height:0;overflow:hidden;
3）万能清除浮动法（针对IE6以下，一般使用该方法）
格式：.clearfix:after{content:"."; clear:both; display:block; heihgt:0; overflow:hidden; visibility:hidden;}
.clearfix{zoom:1;}
18、最小高度自适应解决办法
1）min-height:value; _height:value;
2）min-height:value; height:auto !imgportant; height:value;（建议使用该方法）