html5出现已有一段时间,其新标签已经修改后的标间属性具备了更加优秀的效果和能力,但是老版本的IE6/7一直是开发的一大头疼问题。现将html5和IE6/7遇见的兼容问题总结如下:
1、新标签如:header、section、footer等标签在IE6中不支持。代码示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5兼容性解决</title>
<style>
header{
width: 300px;
height: 300px;
background-color: red;
}
section{
width: 200px;
height: 200px;
background-color: blue;
}
footer{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<header>header</header>
<section>section</section>
<footer>section</footer>
</body>
</html>
在IE6,7,8中展示如下:
谷歌浏览器展示如下:
由上可见IE浏览器对html5的兼容做的并不是很好,由谷歌浏览器可知此三元素为块级元素,在IE中变成了类似内联元素的样式,单又不是内联元素。
解决方案:
既然IE不认识这个元素,那么使用文档流创建该元素:
<script>
document.createElement("header");
document.createElement("section");
document.createElement("footer");
</script>
IE效果如图:
但是效果任然不理想,因为目前元素为内联级元素不是块级元素故而是这种效果,如果想要与谷歌浏览器显示一样,只需要给元素添加css属性display: block;即可,效果如下:
目前写到这里以后更行。
本人于2016年毕业,小白一枚,经验不足。各位看官如有问题,请百度。小白我也是一步一步百度而来。小白QQ群571669420,静请打扰;