HTML5 Shiv--How to solve the incompatibility of IE (IE6/IE7/IE8) with HTML5 tags

HTML5’s semantic tags and attributes allow developers to easily implement clear web page layouts. Most browsers are basically compatible with html5, but currently ie6/ie7/ie8 are not compatible with html5 tags, so javascript processing is required to make them compatible

Method 1: javascript code

<!--[if lt IE9]>
<script>
  (function() {
    if (!/*@cc_on!@*/0) return;
    var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(&#39;, &#39;);
    var i= e.length;
    while (i--){
        　　document.createElement(e[i])
    }
 })()
</script>
<![endif]-->

If it is an IE browser below IE9, it will create an HTML5 tag, so that non-IE browsers will ignore this code, and there will be no unnecessary http requests.

Method 2: Use Google’s html5shiv package

<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

(ps: FQ is required to open the linked webpage. In addition, even if I FQ, the page displayed when opening the webpage is No dialers left to try on pass 0)

Due to the domestic Google server access card, it is recommended to call the domestic cdn

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

This link is available for personal testing

The js part has been written, but there is still a small problem , if you encounter users who disable scripts in ie6/7/8, it will become a styleless "whiteboard" web page. How should we solve it?

We can refer to Facebook's approach, which is to guide users to enter For "/?_fb_noscript=1" pages with the noscript flag, replace the html5 tags with html4 tags, which is lighter than writing a lot of hacks to maintain compatibility.

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
   </div>
</noscript>
<![endif]-->

This can guide the user to open the script, or jump directly to the HTML4 tag design interface.

The js part is solved, let’s move on to the css part. CSS needs to initialize these new elements to facilitate layout settings

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Note: A good memory is not as good as a bad writing. I summarize some practical problems encountered during development. If you encounter them again, you can read them out. The content is relatively basic, any similarity is purely coincidental

For more HTML5 Shiv--methods to solve the incompatibility of HTML5 tags in IE (IE6/IE7/IE8), please pay attention to the PHP Chinese website for related articles!