HTML5新标签不兼容处理

一、自己创建

步骤

（1）头部创建标签document.createElement(“header”);

（2）在样式表里给新的标签加display属性，因为IE678没有的标签也没有默认属性。footer{ display:block;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
document.createElement("leo");
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body{margin:0;}
header{height:100px;background:#9F3; display:block;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative;  display:block;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px;  display:block;}
section{margin-left:210px;background:#F90;height:300px;  display:block;}
footer{ height:100px;background:#C6C; display:block;}
leo{ background:#F03;height:100px; display:block;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
    <aside>侧边栏</aside>
    <section>内容区域</section>
</article>
<footer>页面底部</footer>
<leo>刘伟是个胖子</leo>
</body>
</html>

 

二、引用JS

加上<script src="html5shiv.js"></script>

<script src="html5shiv.js"></script>

 

posted @ 2017-04-06 13:03  念念念不忘  阅读(220)  评论(0)  编辑  收藏  举报