html兼容模式下不显示图片,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