Html5常见的兼容性问题及解决方案

1.双倍浮动bug：描述块元素设置float后，又设置横向的margin值，在ie6下，显示的值比设置的值要大
解决方案：给float的块元素添加display：inline
2.表单元素行高不一致
解决方案：给表单元素添加float属性或者vertical-align属性
3.min-height属性ie6不识别
解决方案：将min-height：value写成_height：value
4.图片默认有空隙
解决方案：a img{display:block}
B img{float:left}
C img{vertical-align:bottom}
5.图片添加超链接后，在某些浏览器下会带有边框
解决方案：img{border:none}
6.在ie8及以下浏览器中不能识别opacity属性
解决方案： opacity：0.5—》 filter:alpha(opacity:50);
7.鼠标指针bug
解决方案：cursor：hand（只有ie8及以下浏览器不支持）
Cursor：pointer 所有浏览器都支持
8.百分比bug：在ie6.7中，子元素50%+50%大于100%
解决方案：给右边的子元素设置 clear：right
9.上下margin重叠问题：相邻两个元素分别设置了margin-bottom和margin-top，只能识别其中较大的值
解决方案：给其中一个元素外层嵌套一个容器，并设置overflow：hidden；触发BFC
10.在ie6下不能识别较小高度的容器（一般为20px以下的）
解决方案：给元素添加overflow：hidden
11.假传圣旨问题：给子元素设置的margin值传递给了父元素
解决方案：a.把设置的margin改为padding
b.给父元素设置overflow：hidden或者float：left触发BFC
C.添加1px的透明边框，即border-top：1px solidtransparent