h5-语义化标签的兼容性问题

1.html代码

<header>头</header>
<nav>导航栏</nav>
<main>
    <article>左</article>
    <aside>右</aside>
</main>
<footer>底部</footer>

2.基本效果图：浏览器怎么改变大小，基本的排版都不会改变

3.css基本的排版，样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        nav{
            width: 100%;
            height: 30px;
            background-color: green;
        }
        main{
            display: block;
            width: 100%;
            height: 500px;
            background-color: chocolate;
        }
        main > article{
            display: block;
            width: 80%;
            height: 100%;
            background-color: darkblue;
            float: left;
        }
        main > aside{
            display: block;
            width: 20%;
            height: 100%;
            background-color: firebrick;
            float: right;
        }
        footer{
            width: 100%;
            height: 80px;
            background-color: hotpink;
        }
    </style>

4.解决ie8以下版本的兼容性问题

<!--<script>
    /**
     * 解决IE8及以下版本兼容问题
     * 手动创建语义化标签
     * 默认创建的都是行级元素
     * 需要使用设置为块级元素：  display: block;
     */
    document.createElement("header");

</script>-->
<!--第二种方式 导入第三方插件-->
<!--<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
<!--<script src="../js/html5shiv.min.js"></script>-->