Solution to the HTML5 label compatibility method collection

HTML5 's semantic tags and attributes make it easy for developers to implement a clear Web page layout, plus CSS3 rendering, to quickly build a rich and flexible Web page.

The new tag elements of HTML5 are:

• <footer> define the tail of the page or section;
• <nav> define the navigation area of the page or section;
• <section> the logical region or content combination of the page;
• <article> define the body or a complete content;
• <aside> definition of supplemental or related content;

Use them to make the code semantically more intuitive and more convenient for SEO optimization. However, this HTML5 new label is not recognized on IE6/IE7/IE8 and requires JavaScript processing. Here are a few ways to go.

Way One: Coding JavaScript

<!--[if Lt ie9]> <script>    (function () {     if (!      /*@[email protected]*/     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 the IE browser below IE9 will create the HTML5 tag, then the non-IE browser will ignore this code, there will be no unnecessary HTTP requests.

Second approach: Using Google's Html5shiv package (recommended)

<!--[if LT ie9]> <script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script><! [endif]-->

However, regardless of which method you use, the CSS for the new tag is initialized. Because HTML5 is represented inline by default, we need to use CSS to manually convert them to block elements for easy layout

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

But if IE6/7/8 disables the script user, then becomes the non-style "whiteboard" webpage, how should we solve?

We can refer to Facebook's practice of directing users to the "/?_fb_noscript=1" page with the NoScript logo, replacing the HTML5 tag with a HTML4 tag, which is much better than writing a lot of hack to preserve compatibility. Approach is more portable.

<!--[If LTE IE 8]> <noscript>     <style>.html5-wrappers{display:none!important;} </style>     <div class= "ie-noscript-warning" > your browser has disabled the script, please <a href= "" > View here </a> to enable the script! or <a href= "/?noscript=1" > continued access to </a>.     </div></noscript><! [endif]-->

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

Solution to the HTML5 label compatibility method collection