html5新增标签兼容性

时间:2021-11-17 23:44:52

很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法:

  • js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement('leo')创建<leo>标签,然后再给它样式,但是创建的leo标签并不是一个块标签,所有可以利用display:block;使leo标签成为块标签,所以我们可以利用js语句分别将html5新增的标签(header,footer...)创建出来,然后分别设置他们的display:block;这样,就可以兼容低版本的浏览器。
  • 利用一个插件 html5shiv.js ,这也是跟第一种方法差不多,只不过第一种比较麻烦,现在将第一种方法写成js插件引入,比较方便。

新增的带有功能效果作用性的标签(datalist、datadetails)要想兼容,只能用原始的js来实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/html5shiv.js"></script>
<style>
body{
margin:0px;
padding:0px;
}
header{
/*display: block;*/
height:100px;
background: #9f3;
}
article{
/*display: block;*/
position: relative;
padding:10px;
background: #cf6;
overflow: hidden;
zoom:1;
}
aside{
/*display: block;*/
position: absolute;
left: 10px;
top:10px;
width:200px;
height: 300px;
background: #f06;
}
section{
/*display: block;*/
margin-left: 210px;
height: 300px;
background: #f90;
}
footer{
/*display: block;*/
height: 100px;
background: #c60;
}
</style>
<script src="js/html5shiv.js"></script>
<script>
/*兼容低版本浏览器:
(1) 利用js创建这些标签,然后再将所有的标签都display:block;
(2)利用插件html5shiv.js
*/
// document.createElement('header');
// document.createElement('article');
// document.createElement('aside');
// document.createElement('section');
// document.createElement('footer');
</script>
</head> <body>
<header>用在页面的头部或者板块的头部</header>
<article>
<aside>侧边栏</aside>
<section>内容区域</section>
</article>
<footer>页面底部</footer> </body>
</html>