如何让IE8及以下版本浏览器支持HTML5新的定义元素？

古城微笑少年丶 2022-01-29 03:37 379阅读 0赞

## 如何让IE8及以下版本浏览器支持HTML5新的定义元素？ ##

**1：我们都知道HTML5在HTML4的基础上，增加了很多新的特性和元素，其中也包括定义元素；比如：header, section, footer, aside, nav…但是这些元素在低版本的IE浏览器中是不支持的。**

所以针对此问题，我学习了两种方法解决。希望对大家也有所帮助

> 1.方法：我们都知道，这些新定义的元素都是用来页面布局的，都是块级元素，所以我们可以通过CSS样式设置display 属性值为 block: 也就是把它们变成行内元素；但是在此之前，我们必须通过script标签对浏览器声明我们的新定义元素。例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            header{
                display: block;
                width: 100%;
                height: 100px;
                background: red;
            }
            nav{
                display: block;
                width: 100%;
                height: 50px;
                background: aqua;
            }
            main{
                display: block;   //转换为行内元素
                width: 100%;
                height: 500px;
                background: #ff9d76;
            }
            main>article{
                width: 70%;
                height: 100%;
                background: #000;
                float: left;
            }
            main>aside{
                width: 30%;
                height: 100%;
                background: #896;
                float: right;
            }
            footer{
                display: block;
                width: 100%;
                height: 40px;
                background: blueviolet;
            }
        </style>
    </head>
    <body>
    
    
    <header>头部</header>
    <nav>导航</nav>
    <main>
        <article>左边</article>
        <aside>右边</aside>
    </main>
    <footer>底部</footer>
    
    
    <script>
    
        document.createElement("header","nav","main","footer","article","aside")
    </script>
    </body>
    </html>

> 2：方法2：引入第三方插件：  
> html5shiv.main,js:在默认请款下，IE8及以下版本不支持后台，HTML5，引入这个文件就可以做到兼容

<script src="js/html5shiv.min.js">
    </script>