常见浏览器样式兼容问题

主要从浏览器解析差异的角度来分析样式兼容

1. 不同浏览器的标签，默认的外边距和内边距不同【100%】
   解决办法：在CSS样式开头，设置*{margin: 0; padding: 0}，将所有标签的margin和padding设置为0.
2. IE6中，块元素设置float属性并且有水平方向的margin时，margin显示出来会比设置的值大，导致最后一个块元素被顶到下一行【90%】
   解决办法：将块元素转化为行内元素，设置样式display:inline
3. IE6、IE7等浏览器，标签高度小于10px时，实际的高度会超出设置的高度，由于浏览器给标签设置了一个默认的最小高度【60%】
   解决办法：设置{overflow: hidden}，或设置line-height < 设置的高度
4. 有些浏览器中，图片会有默认的间距，加了通配符也不起作用【20%】
   解决办法：使用float为img布局，因为所有标签设置float之后都会变成块级元素紧挨在一起，没有边距
5. min-height属性不兼容【5%】
   解决办法：若设置标签的最小高度为200px，则需设置的有：{min-height:200px; height:auto !important; height:200px; overflow:visible}
6. 各种特殊样式的兼容，比如透明、圆角、阴影等
   解决办法：
   (1) 根据浏览器的不同在属性前面添加私有前缀

代表性浏览器	内核	前缀
欧鹏( opera )	Presto	-o-
IE/360/搜狗	Trident	-ms-
火狐	Gecko	-moz-
谷歌/Safari	Webkit	-webkit-

(2) CSS hack：针对不同的浏览器及版本，写不同的css样式
eg. IE条件注释法、选择器前缀法、css属性前缀法
BUT：虽能实现页面的统一，但文档混乱，不便于管理和维护，故少用慎用尽量不用