Home  >  Article  >  Web Front-end  >  How to make versions below IE9 support canvas, css3 and other mainstream HTML5 technologies_html/css_WEB-ITnose

How to make versions below IE9 support canvas, css3 and other mainstream HTML5 technologies_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:00:181104browse

1. Preface.
IE6, 7, and 8 support HTML5, which seems difficult. In fact, there is a very common method, which is to introduce js and css. This pluggable introduction is very helpful for development. For example, the following is an example of making a web page support canvas and css3.
2. Example.
The following is an html example of displaying a red ball in the canvas.

Java code

  1. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. ; fewfwe
  3. >
  4. background: #444;
  5. color: #FFF;
  6. font-family: Helvetica, Arial, sans-serif;
  7. text-align: center;
  8. }
  9. #cv {
  10. width: 600px; height: 400px;
  11. background: #000;
  12. border-radius: 20px;
  13. padding: 20px;
  14. margin: 20px auto;
  15. box-shadow: 0 0 40px #222;
  16. behavior: url(public/ie-css3.htc);
  17. }
  18. }
  19. >
  20. 🎜>

  21. This example cannot be run in IE8, but Firefox can. If you want it to run on 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. This is an open source js file that can be used with confidence. It mainly It solves the problem of js compatible with html5 in versions 6, 7 and 8. The canvas compatible file is named excanvas.compiled.js, and I have packaged all files 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 and css3 compatibility.
    3.demo download.
    See attachment.
    4. Example running results
    See the picture below. It is a red circle displayed on a black canvas.

    5. Summary
    IE6, 7, and 8 are compatible with other HTML5 technologies. In fact, they can all follow the practice of citing js and css. In this way, the last obstacle has been cleared for HTML5 to take off on the mobile terminal.

  22. Test21.rar (13.6 KB)
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn