The perfect solution for IE (IE6/IE7/IE8) is incompatible with the HTML5 label method:
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
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, HGR OUP, 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 a HTML5 tag, the non-IE browser will ignore the code and there will be no unnecessary HTTP requests.
Second approach: Using Google's Html5shiv package (recommended)
<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 solve?
You 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.
<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 "> Continue to visit </a>.
</div>
</noscript>
<! [endif]-->
This can lead the user to open the script or jump directly to the interface of the HTML4 label design.
Solve IE8 does not support HTML5 label best solution?