Solution to the HTML5 label compatibility method collection

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.