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

1.html代码

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

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

3.css基本的排版，样式

     <style>
         *{
             margin:;
             padding:;
         }
         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>-->