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:

Define the header of the page or section;

Define the footer of the page or section;

Define the navigation area of ​​a page or section;

A logical area or combination of content on a page;

Define text or a complete content;

Define 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.