浏览器兼容性问题是指由于不同的浏览器对同一代码的分析不同，导致页面显示效果不一致的情况。 在很多情况下，无论用户使用哪个浏览器查看我们的网站或登录我们的系统，都应该是统一的显示效果。 因此，浏览器兼容性问题是前端开发人员经常要面对和解决的问题。
51CTO推荐阅读：完全免费提供8种浏览器兼容性测试工具
在学习浏览器兼容性之前，我想把前端开发人员分为两类。
第一个是按照设计图正确开发的前端开发者，可以说正确到1px。 他们很容易发现设计图的不足，偶尔会遇到浏览器的兼容性问题。 这些问题往往会导致浏览器bug死亡，而且他们制作的页面后期容易维护，代码复用问题少，可以说是比较坚固放心的代码。
二是基本按照设计图开发的前端开发者，很多细枝末节差别很大，间距、行高、图像位置等往往相差几个px。 某些效果的实现也是通过反复调试得到的，但具体为什么会出现这样的效果还很模糊，整体布局非常脆弱。 稍微一改动就会变得乱七八糟。 代码为什么这么写还不知道。 这样的开发人员经常受到兼容性问题的困扰。 修改后这个浏览器又搞乱了别的浏览器。 即使试着改变也毫无头绪。 其实他们面临的兼容性问题大部分不是浏览器的错，而是他们的技术本身。
文章主要针对第一类，严格型的开发者，所以这里主要从浏览器解析差异的角度来分析兼容性问题。 (相关文章推荐：主流浏览器CSS 3和HTML 5的兼容性列表)
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随意书写一些标签，不加风格控制时，各自的边距和缩放差异较大。
碰撞频率：100%
解决方案：在CSS上输入*{margin:0； 垫：0； }
注：这是最常见且最容易解决的浏览器兼容性问题，几乎所有CSS文件的开头都使用通配符*，并将每个选项卡的内部和外部修补程序设置为0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状：常见症状是IE6后面的阻滞被推到下一行
碰撞频率： 90% (稍微复杂的页面碰撞，float布局中最常见的浏览器兼容性问题) ) )。
解决方案：将display:inline添加到浮点标签样式控件； 将其转换为行内属性
注：我们最常用的是div CSS布局。 div是典型的块特性标签，对于横向布局，我们通常用div float实现。 如果用边距实现横向间距设定，这是必然面临的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：与IE6、7游泳中的该标签高度不受控制，超过了自己设置的高度
碰撞频率： 60%
解决方案：将overflow :隐藏设置为超出高度的标签； 或者，将行高设置为小于您设置的高度。
备注：这通常出现在我们设置了小圆形背景的标签上。 出现此问题的原因是，在IE8之前的浏览器中，标签具有最小缺省行高。 即使您的标签为空，此标签的高度也是默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状： IE6的音调比超过了设定的音调
碰撞概率： 20%
解决方案：显示：块； 后加入display:inline； 显示：表；
备注：为了设置行内的属性标签、宽度和高度，必须设置display:block； (输入标签特殊的情况除外)。 用float布局，如果有横向margin的话，在IE6下，他会有块属性float之后的横向margin的错误。 但是，由于其本身就是内嵌属性标签，因此添加display:inline将无法设置智能刺猬。 此时，需要在display:inline的后面添加display:talbe。
浏览器兼容问题五：图片默认有间距
问题症状：当几个img标签在一起时，某些浏览器具有默认间隔，添加问题1中提到的通配符不起作用。
碰撞概率： 20%
解决方案：使用float属性设置img布局
注意：由于img标签是行内属性标签，因此只要不超过容器宽度，img标签就会排成一行，但某些浏览器中的img标签之间存在间隔。 消除这个间隔，使用浮动是正道。 (我的一个学生可以用负号的margin解决，但是负号本身是容易引起浏览器兼容性问题的用法，所以我禁止他们使用。)
浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为最小高度本身不兼容
的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容CSS设置
做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
/* CSS hack*/我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300px;*height:200px;_height:100px;IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。