一、为什么会出现css的兼容性问题
原因：不同的浏览器使用的内核不一样，对css的解析不一样，所以效果也不一样
二、常见的浏览器内核
| 浏览器 | 内核表示法 |
| IE浏览器 | -ms- |
| 谷歌浏览器、360浏览器 | -webkit- |
| 火狐浏览器 | -moz- |
三、双倍浮动bug
描述：块级元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值比设置的值大
解决：给设置了浮动的元素添加display:inline
四、表单行高不一样
1、给表单元素添加vertical-align:middle
2、给表单元素添加float:left
五、IE6（默认最小尺寸为16px） 不识别较小高度的标签（一般为10px）
1、给标签添加：overflow:hidden
2、给标签添加font-size:0
六、图片添加超链接时，在IE浏览器中会有蓝色的边框
给图片添加border:0;或者border:none;
七、最小高度min-height不兼容IE6
1、min-height:100px;_height:100px;
2、min-height:100px;height:auto !important;height:100px
八、图片默认有间隙
1、给img添加float属性
2、给img设置为块级元素
九、百分比bug
描述：父元素设置100%，子元素各占50%，在IE6下，50%+50%大于100%
解决：给右边的浮动元素添加clear:right
十、透明度设置，IE不识别opacity属性
解决：
标准写法：opacity:value(取值范围0到1)
兼容IE浏览器：fliter:alpha(opacity=value)（取值范围1-100）
十一、上下margin重叠问题
描述：给上面的元素设置margin-bottom，给下面的元素设置margin-top,只能识别其中较大的那个值
解决：
1、margin-top和margin-bottom只设置一个值
2、给其中一个元素再包裹一个盒子并设置overflow:hidden;
十二、给子元素设置margin-top却用在了父元素上
1、给父元素设置overflow:hidden
2、给父元素设置float:left