Let IE perfect support HTML5 (CSS3) solution

Seemingly before with you to share this kind of problem, html5/css3 those dazzling practical effect, really let a person very eye slander, but sad urge IE browser, only IE9 support HTML5, which let us very disappointed ah, but really there is no way? In fact, there are remedial methods, the following methods are described below, allowing the client browser to perfectly support CSS3, HTML5:

The first method: IE9 the following version of IE will create HTML5 tags, non-ie browser will ignore this code, so there will be no HTTP requests, it will not affect the efficiency of Web page execution.

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

Second approach: Introduce Google's Html5shiv package (recommended) front-end resource sharing on your Web page

<!--[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 HTML5 tags with html4 tags, which is lighter than writing a lot of hack to keep compatibility. Front-end resource sharing

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

Directs the user to open the script, or jump directly to the interface of the HTML4 label design.