(1)浏览器兼容题目一：差别浏览器的标签默许的外补丁和内补丁差别
题目病症：随意写几个标签，不加款式掌握的状况下，各自的margin 和padding差别较大。
遇到频次:100%
处理方案：CSS里 *{margin:0;padding:0;}
备注：这个是最罕见的也是最易处理的一个浏览器兼容性题目，险些一切的CSS文件开首都邑用通配符*来设置各个标签的表里补丁是0。

(2)浏览器兼容题目二：块属性标签float后，又有横行的margin状况下，在IE6显现margin比设置的大
题目病症:罕见病症是IE6中背面的一块被顶到下一行
遇到频次：90%（轻微复杂点的页面都邑遇到，float规划最罕见的浏览器兼容题目）
处理方案：在float的标签款式掌握中到场 display:inline;将其转化为行内属性
备注：我们最经常运用的就是div+CSS规划了，而div就是一个典范的块属性标签，横向规划的时刻我们平常都是用div float完成的，横向的间距设置假如用margin完成，这就是一个必然会遇到的兼容性题目。

(3)浏览器兼容题目三：设置较小高度标签（平常小于10px），在IE6，IE7，游览中高度超越自身设置高度
题目病症：IE6、7和游览里这个标签的高度不受掌握，超越自身设置的高度
遇到频次：60%
处理方案：给超越高度的标签设置overflow:hidden;或许设置行高line-height 小于你设置的高度。
备注：这类状况平常涌现在我们设置小圆角背景的标签里。涌现这个题目的原因是IE8之前的浏览器都邑给标签一个最小默许的行高的高度。纵然你的标签是空的，这个标签的高度照样会到达默许的行高。

(4)浏览器兼容题目四：行内属性标签，设置display:block后采纳float规划，又有横行的margin的状况，IE6间距bug
题目病症：IE6里的间距比凌驾设置的间距
遇到概率：20%
处理方案 ： 在display:block;背面到场display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们须要设置display:block;(除了input标签比较特别)。在用float规划并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过由于它自身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时刻我们还须要在display:inline背面到场display:talbe。

(5) 浏览器兼容题目五：图片默许有间距
题目病症：几个img标签放在一同的时刻，有些浏览器会有默许的间距，加了题目一中提到的通配符也不起作用。
遇到概率：20%
处理方案：运用float属性为img规划
备注 ： 由于img标签是行内属性标签，所以只要不超越容器宽度，img标签都邑排在一行里，然则部份浏览器的img标签之间会有个间距。去掉这个间距运用float是正道。（我的一个门生运用负margin，虽然能处理，但负margin自身就是轻易引发浏览器兼容题目的用法，所以我制止他们运用）

(6) 浏览器兼容题目六：标签最低高度设置min-height不兼容
题目病症：由于min-height自身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
遇到概率：5%
处理方案：假如我们要设置一个标签的最小高度200px，须要举行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S体系前端开时，有许多状况下我们又这类需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是涌现滚动条。这时刻我们就会面对这个兼容性题目。

(7)浏览器兼容题目七：透明度的兼容CSS设置
平常在ie顶用的是filter:alpha(opacity=0);这个属性来设置div或许是块级元素的透明度，而在firefox中，平常就是直接运用opacity:0,关于兼容的，平常的做法就是在誊写css款式的将2个都写上就行，就可以完成兼容