解决HTML5新增语义标签在比IE9更早的版本下不兼容问题

最新推荐文章于 2024-11-04 13:49:42 发布

pudding的旋律

最新推荐文章于 2024-11-04 13:49:42 发布

阅读量293

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43290229/article/details/86584375

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决HTML5在IE9及以下版本浏览器中显示问题的两种方法：手动创建标签并设置CSS属性，以及推荐的引入html5shiv.min.js文件，使浏览器正确识别并显示HTML5新标签。

下面这段代码在chorme、firefox等浏览器下均正常显示，但在IE9以下的版本不能正常显示：

<!DOCTYPE html>
<html>
<head>
	<title>mytest</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	header{
		width: 100%;
		height: 50px;
		background-color: red;
	}
	article{
		width: 80%;
		height: 400px;
		background-color: green;
		float: left;
	}
	aside{
		width: 20%;
		height: 400px;
		background-color: grey;
		float: right;
	}
	nav{
		width: 100%;
		height: 30px;
		background-color: yellow;
	}
	footer{
		width: 100%;
		height: 90px;
		display: block;
		background-color: blue;
		clear: both;
	}
	</style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
	<article>左边</article>
	<aside>右边</aside>
</main>
<footer>底部</footer>
</body>
</html>

在chorme下显示是这样的：
在这里插入图片描述而在IE8及以下版本显示是这样的：

我设置的所有css都失效了，这说明浏览器根本就无法识别这些标签，那要怎么办呢？
接下来介绍两种方法：
1、手动创建标签（比较麻烦，不推荐）

		document.createElement("header");
		document.createElement("article");
		document.createElement("aside");
		document.createElement("main");
		document.createElement("nav");
		document.createElement("footer");

然而这样还不够，这样建出来的是行内标签，我们还得将他们的CSS设一个display:block;将他们转换成块级元素，这样设置的宽和高才能生效。
2、引入html5shiv.min.js文件（推荐，做大型项目时更简便）

<script type="text/javascript" src="html5shiv.min.js"></script>

或者

<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

上面那种需要将html5shiv.min.js下载到本地，可以在这里下载
下面这种直接引入就可以了。