To enable ie9 or earlier versions to support mainstream html5 technologies such as canvas and css3, ie9html5
1. preface.
Ie6, 7, and 8 support html5, which seems difficult. In fact, there is a common method, namely introducing js and css. This pluggable introduction is very helpful for development. For example, the following example shows how to enable the webpage to support canvas and css3.
2. Example.
The following is an example of html that shows a red ball in the canvas.
Java code
- <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
- <HTML>
- <HEAD>
- <TITLE> fewfwe </TITLE>
- <Head>
- <Style type = "text/css">
- Body {
- Background: #444;
- Color: # FFF;
- Font-family: Helvetica, Arial, sans-serif;
- Text-align: center;
- }
- # Cv {
- Width: 600px; height: 400px;
- Background: #000;
- Border-radius: 20px;
- Padding: 20px;
- Margin: 20px auto;
- Box-shadow: 0 040px #222;
- Behavior: url (public/ie-css3.htc );
- }
- </Style>
- <Script type = "text/javascript">
- Function test (){
- Var ctx = document. getElementById ("cv"). getContext ("2d ");
- Ctx. fillStyle = "# aa0000 ";
- Ctx. beginPath ();
- Ctx. arc (100,100, 25, 0, Math. PI * 2, true );
- Ctx. closePath ();
- Ctx. fill ();
- }
- Window. onload = test;
- </Script>
- </Head>
- <Body>
- <! -- [If IE]>
- <Script src = "public/html5.js" type = "text/javascript"> </script>
- <Script type = "text/javascript" src = "public/excanvas. compiled. js"> </script>
- <! [Endif] -->
- <Canvas id = "cv"> </canvas>
- </Body>
This example cannot run in ie8, but Firefox can. If you want it to run in ie6, 7, and 8, you need to do two things.
2.1 Add an html5 ie auxiliary js file and a canvas compatible js File
This file can be named html5.js. It is an open source js file and can be used with confidence. It mainly solves the problem of html5-compatible js in versions 6, 7, and 8. The canvas compatibility file is named excanvas. compiled. js. I have packed all the files in the demo. Yes.
2. Add a css file and reference it on the page.
The css file is named ie-css3.htc, which solves the problem of ie6, compatible with css3.
3. Download the demo.
See the attachment.
4. example running result
See the image below. It is a red circle displayed on the Black canvas.
5. Summary
Ie6, 7, and 8 are compatible with other html5 technologies. In fact, they can all follow the example of js and css. In this way, html5 is galloping on the Mobile End, clearing the last obstacle.
How can I make IE9 or earlier versions support Html5 and Css30?
Html5.js is used to allow IE to recognize html5 elements (the principle is to generate related html5 elements on the page and tell IE that such elements are useful, otherwise they will be filtered out by IE ), therefore, it cannot support Css3.0 for versions earlier than IE9, because the underlying browser (rendering engine) is supported and has nothing to do with js.
Html5 css compatibility with IE 9 browsers
Use this js Code for compatibility
<Script type = "text/javascript">
(Function (){
Var html5elmeents = "address | article | aside | audio | canvas | command | datalist | details | diils | figure | figcaption | footer | header | hgroup | keygen | mark | meter | menu | nav | progress | ruby | section | time | video ". split ('| ');
For (var I = 0; I Document. createElement (html5elmeents [I]);
}
})();
</Script>