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
