浏览器兼容性总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

1.最主要也是最常见的，就是浏览器对标签的默认样式的解析不一致，所以我们要统一，就要进行样式重置，最简单的初始化方法是
*{margin:0; padding:0;}
2.上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。
解决方法：
（1）margin改为padding
（2）绝对定位position:absolute;
3.有些浏览器解析img标签也有不同，img是行内元素，一般都会紧接着排放，但是在有些情况下还是会突然出现个间距，解决办法是给它来个浮动 float
4.标签属性min-height是不兼容的，所以使用的时候也要稍微改改。
.box{min-height:100px;height:auto !important; height:100px; overflow:visible;}
5.很多时候可能会纳闷超链接访问过后，样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A
a:link{} a:visited{} a:hover{} a:active{}
6.chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：
-webkit-text-size-adjust: none;
7.因为存在两种盒子模式：IE盒子模式和W3C标准模式，所以对象的实际宽度也要注意。
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
8.鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
9.消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效
10.CSS控制透明度问题：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60);
10.有些时候图片下方会出现一条间隙，一般给img添加vertical-align属性即可，比如top middle img{verticle-align:center;}