Html5语义化标签兼容旧版本浏览器

71 阅读 0 评论 47 点赞

我是靠谱客的博主坦率菠萝，最近开发中收集的这篇文章主要介绍Html5语义化标签兼容旧版本浏览器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html5中常用的语义化标签：<header>：头部定义section或page的页眉、<footer>：定义section或page的页脚、<aside>：定义页面内容之外的内容、<article>：定义文章、<section>：定义部分、<nav>：定义导航链接.

这些语义化标签是h5独有的新特性，使我们的代码更加的规范。但是这些标签对老版本的浏览器(如：ie6/7/8)就不支持了,怎么办呢?当然我们可以认怂，不用。。。但是我们摆脱不了不得不用的情况，接下来听我说...

第一种方式：

浏览器不认识这个标签<header> ，我们就可以写js的方式让你认识，创建出来header这个元素，你不认识，我创建出来让你认识。这个时候需要把css的显示属性display改成block。见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        header{
            /* display改成块元素 */
           display: block;
        }
    </style>
    <script>
        // 创建出来header这个元素
        document.createElement("header");
    </script>
</head>
<body>
    <header>

    </header>
</body>
</html>

第二种方式：

第一种方式只适合标签比较少的情况，然而大多数情况下，我们代码中的标签是非常的多的。所以接下来继续往下

我们引入别人做好的一个插件来代替第一种方式，它可以大量创建我们的新标签。它。。它的名字是html5shiv，下载地址是https://cdn.bootcss.com/html5shiv/r29/html5.js(也可以下载下来使用，我这里直接引入了)。见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <!-- 直接引入 -->
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js">
        
    </script>
</head>
<body>
    <header>

    </header>
</body>
</html>

这种方式还不够完美，因为如果高版本的浏览器也这样使用，岂不是增加浏览器的请求次数，呜呜呜怎么办呢？接着往下瞅瞅

这个时候我们可以加上一个限制，如果浏览器版本高于IE8，再启动这个脚本。见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <!-- 加上限制 -->
    <!--[if lte IE 8]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js">
        
    </script>
    <![endif]-->
</head>
<body>
    <header>

    </header>
</body>
</html>

OK，就说到这。祝各位工作开心愉快！