常见的css兼容问题

一、为什么会出现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