How to enable IE to support HTML5

Source: Internet
Author: User

Comments: More and more sites are using HTML5 tags. However, there are still many users using IE6, IE7, and ie8. To enable normal access to all viewers, more and more websites are using HTML5 tags. However, many users are currently using IE6, IE7, and ie8. To enable normal access for all viewers, there are two solutions:

1. Create multiple templates for the website. The User-Agent can be judged by a program to display different pages for different browser users, for example, Youku.

2. Use Javascript to support HTML tags in browsers that do not support HTML5.

The better solution for IE is html5shiv. Htnl5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by the IE6-8. These new elements cannot wrap child elements as parent nodes and cannot apply CSS styles. To apply CSS styles to unknown elements, you only need to execute document. createElement (elementName. Html5shiv is created based on this principle.

Html5shiv is very simple to use. Considering IE9 supports html5, you only need to add the following code to the page head:

The Code is as follows:
<! -- [If lt IE 9] --> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <! -- [Endif] -->

Html5shiv Official Website: http://code.google.com/p/html5shiv/

Below are some supplements:

Of course, this includes my BLOG. About HTML5, I had to mention IE. Microsoft dismissed HTML 5 standards when mainstream browser vendors such as Apple, Google, Opera, and Mozilla actively participated in the formulation and promotion of new HTML standards. However, Microsoft recently stated that HTML 5 should be supported in IE, so that IE8 and below so far cannot support HTML5 tags. However, the method for enabling IE to support HTML5 is found in sitepoint.

The following is an example of IE 8 display, before processing:

To enable IE (including IE6) to support HTML5 elements, we need to add the following JavaScript in the HTML header, which is a simple document. createElement Declaration: Use Condition annotations to create corresponding nodes for IE in objects.

The Code is as follows:
<! -- [If IE]>
<Script>
Document. createElement ("header ");
Document. createElement ("footer ");
Document. createElement ("nav ");
Document. createElement ("article ");
Document. createElement ("section ");
</Script>
<! [Endif] -->

After the preceding code is added, the following results are displayed in IE8:

The JavaScript code for creating nodes in the sitepoint example seems too bloated, and the Code provided in smashingmagazine seems more concise.
The demo is as follows:


<!DOCTYPE html>

Tip: you can modify some code before running

The Code is as follows:
<! -- [If IE]>
<Script>
(Function () {if (! /* @ Cc_on! @ */0) return; var e = "header, footer, nav, article, section ". split (','), I = e. length; while (I --) {document. createElement (e [I]) }}) ()
</Script>
<! [Endif] -->

HTML5 is represented by inline elements by default. to layout these elements, we need to use CSS to manually convert them into block elements, as shown in the following example:

The Code is as follows:
Header, footer, nav, section, article {
Display: block;
}

Related Article

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.