HTML5 Shiv Perfect solution to IE (IE6/IE7/IE8) incompatible HTML5 label Method _javascript technique

HTML5 's semantic tags and attributes make it very easy for developers to achieve clear Web page layouts, plus CSS3 renderings, and quickly build rich, flexible web pages.

The new tab elements for HTML5 are:

<footer> define the tail of the page or section;
<nav> define the navigation area of the page or section;
<section> the logical area or content combination of the page;
<article> define the text or a complete content;
<aside> definition supplements or related content;




Using them can make code semantics more intuitive and more convenient for SEO optimization. However, this new HTML5 tag is not recognized on the IE6/IE7/IE8 and requires JavaScript processing. Here are a few ways to do this.
mode one: 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 IE9 below the Internet Explorer will create a HTML5 tag, so non-IE browser will ignore this code, there will be no unnecessary HTTP request.

The second approach: 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, 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]-->

However, regardless of which method you use, you will initialize the new label's CSS. Because the HTML5 is shown by default as an inline element, layout of these elements we need to use CSS to manually convert them to block elements for easy layout

Copy Code code as follows:

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

But what can we do if IE6/7/8 user who disables the script becomes a "whiteboard" without a style?

We can refer to Facebook's practice of directing users to a "/?_fb_noscript=1" page with a NoScript logo and replacing HTML5 tags with html4 tags, which is much lighter than writing a lot of hack to maintain compatibility.

<!--[If LTE IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;} </style>
   <div class= "ie-noscript-warning" > your browser disables scripting, please <a href= "" > View here </a> to enable scripting! or <a href= "/?noscript=1" > continue to visit </a>.
   </div>
</noscript>
<![ Endif]-->

This can lead the user to open the script, or jump directly to the HTML4 label design interface.