HTML5 Shiv perfectly solves the problem that IE (IE6/IE7/IE8) is not compatible with HTML5 tags_javascript skills

HTML5’s semantic tags and attributes allow developers to easily implement clear web page layouts. Coupled with CSS3 effect rendering, it is very simple to quickly create rich and flexible web pages.

The new tag elements of HTML5 are:

1aa9e5d373740b65a0cc8f0a02150c53Define the header of the page or section;
c37f8231a37e88427e62669260f0074dDefine the footer of the page or section;
c787b9a589a3ece771e842a6176cf8e9Define the navigation area of ​​a page or section;
2f8332c8dcfd5c7dec030a070bf652c3 A logical area or combination of content on a page;
23c3de37f2f9ebcb477c4a90aac6fffdDefine text or a complete content;
15221ee8cba27fc1d7a26c47a001eb9bDefine supplementary or related content;




Using them can make the code semantics more intuitive and facilitate SEO optimization. However, this new HTML5 tag is not recognized on IE6/IE7/IE8 and requires JavaScript processing. Here are a few ways.
Method 1: Coding JavaScript

<!--[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(', ');
   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.

Second method: Use Google’s html5shiv package (recommended)

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

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]-->

But no matter which of the above methods is used, the CSS of the new tag must be initialized. Because HTML5 behaves as inline elements by default, to layout these elements we need to use CSS to manually convert them into block elements for convenient layout.

Copy code The code is as follows:

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

But if users of ie6/7/8 disable scripts, it will become an unstyled "whiteboard" web page. How should we solve it?

We can follow Facebook's approach, which is to guide users to enter the "/?_fb_noscript=1" page with the noscript logo, and replace the html5 tags with html4 tags. This is easier than writing a lot of hacks to maintain compatibility. Some.

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

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