Comments: More and more sites are using HTML5 tags. However, there are still many people using IE6, IE7, and IE8. Here is a method to allow IE to support html5. For more information, see
Now HTML5 is attracting more and more attention, but currently HTML5-supported browsers are not mainstream. In particular, IE6 is still used for nearly 50% of domestic users. Because IE9 that supports HTML5 does not support the installation of the XP system, in this way, HTML5 developers will have to consider the backward compatibility issue for a long time in the future. There are many HTML5 labels or CSS selector compatibility practices. One of them is to generate a tag element.
For the basic principle, see the following code in IE8. The style does not work at all.
The Code is as follows:
<Html>
<Head>
<Style> mxria {color: red ;}</style>
</Head>
<Body>
<Mxria> Hello! </Mxria>
</Body>
</Html>
To identify the <mxria> </mxria> label and display the effect of the corresponding style in the browser, we can add a section of js below, and the effect will be different.
The Code is as follows:
<Html>
<Head>
<Style> mxria {color: red ;}</style>
<Script> document. createElement ("mxria") </script>
</Head>
<Body>
<Mxria> Hello! Mxria.com </mxria>
</Body>
</Html>
Now everyone understands the secrets! Yes, it is document. createElement, HTML5 shiv is such a js plug-in that all HTML5 labels are regenerated. You need to load the plug-in, then the HTML5 program can be recognized by all browsers.
: Http://html5shim.googlecode.com/svn/trunk/html5.js
Simple use of trunk/html5.js:
The following is a reference to Google's html5.js file:
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 = "dist/html5shiv. js"> </script>
<! [Endif] -->
Copy the above Code to the head part and remember to use the head part (because IE must know this element before parsing the element, this js file cannot be called elsewhere, otherwise it will not work)
Of course, you can also take out the code and do it yourself:
(Function () {if (! /* @ Cc_on! @ */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 (','), I = e. length; while (I --) {document. createElement (e [I]) }}) ()
Add this section in css:
/* Html5 */article, aside, dialog, footer, header, section, footer, nav, figure, menu {display: block}
These html5 labels are mainly made into blocks, like div.
Okay, let's just put it simply: Reference html5.js to make html5 labels into blocks.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
