由于一些较早的浏览器不兼容HTML5,因此对于HTML5中的新标签元素,这些浏览器自动将其作为内联元素处理。
HTML5兼容性解决方案
- html5shiv是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。因此只需在 IE9 以下版本的浏览器中引入此 HTML5 JavaScript 补丁即可解决。
传送门:html5shiv CDN加速地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
- html5shiv让低版本IE支持HTML5新标签元素的原理
html5shiv让低版本IE支持HTML5新标签元素的原理有两点:
I. 在页面中创建HTML5新标签元素。
II. 将新标签元素的样式转化为块级元素。
以<nav>标签为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
nav {
/* 将元素转化为块级元素 */
display: block;
}
</style>
<script type="text/javascript">
// 创建<nav>标签
document.createElement("nav");
</script>
</head>
<body>
<nav>HTML5新标签元素</nav>
</body>
</html>