首页 > Web开发 > 详细

HTML5兼容

时间:2016-05-15 21:28:54      阅读:253      评论:0      收藏:0      [点我收藏+]

标签

?针对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>

HTML5兼容

原文:http://www.cnblogs.com/binperson/p/5495982.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!