前端常见兼容性问题及解决方案总结

1.html5新标签ie6,7兼容性问题

h5新标签如header,footer,section在ie6,7下不能正常的显示,看一个小栗子

html代码

正常浏览器下显示

ie6,7下显示

出现这种情况是因为在ie6,7下不支持这些标签,解决的方法如下:

1).用js动态创建这些标签,在css中再给这些标签的display属性赋值为block

方法1截图

2).页面中引入js插件html5shiv.js

方法二截图

2.元素浮动兼容性

1)元素浮动之后,能设置宽度的话就给元素加宽度,如果需要元素是内容撑开,就给它里面的块元素加浮动

代码

正常浏览器下运行结果如下:

ie6下运行结果如下:

要解决这个问题只需给div中的h2标签加浮动即可

2)第一块元素浮动,第二块元素加margin值等于第一个元素的宽,ie6下会有间隙

正常浏览器下运行效果

ie6下运行效果

解决方案:

3.ie6下子元素超过父元素宽高会把父元素的宽高撑开

代码

正常浏览器

ie6

解决方案:

最好不要这么写,不要让子元素的宽高超过父元素

4.p标签包含元素嵌套规则

源代码

浏览器解析

解决:

不能嵌套块元素的标签不要嵌套块元素(p,td,h)

5.margin兼容性问题

代码

浏览器解析

可以看到会出现两个问题:1.margin-top传递(父元素没设置margin-top也有margin-top)2.上下margin叠压,解决:

6.inline-block在ie6下兼容性问题

三个div设置宽高会竖着排列,给他们的css样式加上display:inline-block;正常浏览器下这些div就会横着排列,但是在ie6下还是竖着排列,这是因为inline-block是css新出的属性,所以ie6不兼容,解决方案:

7.ie6最小高度问题(在ie6下div元素有一个默认高度为19px,如果设置元素的高度为1px,ie6下元素看起来就会高很多),解决方案:

8.ie6下双边距问题

附加:css  hack