我觉得要了解各个浏览器的内核比较好，毕竟HTML和css代码是靠浏览器的内核来解析。一些常见的兼容性问题楼上也举例了。

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

浏览器兼容问题一：不同浏览器的标签默认的外边框和内边框不同 ,解决方案： css里    *{margin:0;padding:0;}.

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 , 问题症状: 常见症状是IE6中后面的一块被顶到下一行.我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度 ,出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高,解决方案： 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug（类似第二种),解决方案： 在display:block;后面加入display:inline;display:table;

浏览器兼容问题五：图片默认有间距,解决方案： 使用float属性为img布局.

浏览器兼容问题六：标签最低高度设置min-height不兼容,决方案： 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px;

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。