HTML5兼容
标签
•针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们方法如下：
在页面的头部加下：
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
</script>
l样式
•HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下 它默认的display
<!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>刘6是个胖子</leo>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="html5shiv.js"></script>
<style>
body{margin:0;}
header{height:100px;background:#9F3;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px;}
section{margin-left:210px;background:#F90;height:300px;}
footer{ height:100px;background:#C6C;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
<aside>侧边栏</aside>
<section>内容区域</section>
</article>
<footer>页面底部</footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="html5shiv.js"></script>
</head>
<body>
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<details>
<summary>课堂</summary>
<p>国内将知名机构</p>
</details>
<progress max="200" value="100">
<span>76</span>%
</progress>
</body>
</html>
