1. Preface.
ie6,7,8 support HTML5, looks more difficult, in fact, there is a method is very common, that is, the introduction of JS and CSS, this pluggable introduction to the development is very helpful. For example, here is an example that allows Web pages to support canvas and CSS3.
2. Example.
The following is an example of HTML that displays a red ball in the canvas canvas.
Java code
- <! DOCTYPE HTML public "-//W3C//DTD HTML 4.0 transitional//en" >
- <HTML>
- <HEAD>
- <TITLE> fewfwe</title>
- <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 0 40px #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 (0, math.pi*2, true);
- Ctx.closepath ();
- Ctx.fill ();
- }
- window.onload = test;
- </script>
- <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 be run in IE8, Firefox can. If you want it to work in ie6,7,8, you need to do two things.
2.1 Add a HTML5 IE Auxiliary js file and a canvas-compatible JS file
This file can be named Html5.js, which is an open source JS file, can be used with ease, it is mainly to solve the 6,7,8 compatible with HTML5 JS problem. The canvas compatible file is named Excanvas.compiled.js, and all the files I have packed in the demo. can be downloaded.
2.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,7,8, which is compatible with CSS3.
3.demo Downloads.
See annex.
4. Example Run Results
See this picture below. is a red circle that appears above the black canvas.
5. Summary
ie6,7,8 compatibility with other HTML5 technology, in fact, can be modeled as a reference to JS and CSS practices. In this way, the HTML5 on the mobile side of the gallop, clearing the last hint of obstacles.
