Since IE8 does not support HTML5, and it is the default browser in Win7, even if we hate it, we can't use it for a few years.
Recently, I made a project that needs to be compatible with IE8, and inevitably used HTML5+CSS3, even canvas and svg. After a project came down, I collected some libraries aimed at making HTML5 compatible with IE8, as well as some scattered codes and graceful degradation techniques, which are organized as follows. Compatibility of IE8 is a big job. This article is not complete, and there must be many omissions and deficiencies. I hope readers can correct me in the comment area. At the same time, I will gradually enrich this article in future projects.
1. HTML5 tag compatibility solution: html5shiv.js
GitHub address: https://github.com/aFarkas/html5shiv/
IE8 does not support HTML5 new tags, such as <header>, <nav> and other tags cannot be rendered in IE8. html5shiv.js can help IE6-8 browsers be compatible with HTML5 semantic tags.
How to use: Refer to the html5shiv.js file in the page. It must be added in the <head> element of the page, because the IE browser must know this element before the element is parsed, so this js file cannot be referenced at the bottom of the page.
2. CSS3 media query compatible solution: Respond.js
GitHub address: https://github.com/scottjehl/Respond
IE8 does not support CSS media queries, which is greatly detrimental to responsive design. Respond.js helps IE6-8 be compatible with "min/max-width" media queries.
How to use: Reference Respond.js after the reference location of all css files in the page. And the earlier Respond.js is referenced, the less chance the user will see the page flicker.
3. CSS3 font unit "rem" compatibility scheme: rem.js
GitHub address: https://github.com/chuckcarpenter/REM-unit-polyfill
CSS3 introduces a new font size unit rem, which is different from em's function of "setting font size relative to its parent element". rem is the font size ratio unit relative to the root element <html>, which has become one of the current mainstream units. one. IE9+ began to support, IE8 can only be supported by introducing js library.
How to use: Refer to the rem.js file in the page. The reference needs to be in the footer, which is at the end of <body>, after all css file references and DOM elements.
Four, CSS3 "background-size" property "cover" and "contain" property value compatibility scheme: background-size polyfill
GitHub address: https://github.com/louisremi/background-size-polyfill
"background-size" is a newly introduced property in CSS3, and there are two property values that are very commonly used, namely "cover" and "contain". "cover" can expand the background image to be large enough so that the background image completely covers the background area, some parts of the background image may not be displayed in the background positioning area. "contain" expands the image image to its maximum size so that its width and height fully fit the content area. IE8 also does not support it, which is very inconvenient. At this time, you can refer to the "background-size polyfill" library for compatibility.
How to use: Different from the above libraries, the code file of "background-size polyfill" needs to be referenced in css. Add a line of "-ms-behavior" attribute wherever the two "background-size" attribute values are used:
.selector {
background-size: cover;
/* The following relative paths are relative to the document, not the css file! */
/* Use absolute paths to avoid confusion */
-ms-behavior: url(/backgroundsize.min.htc);
}
5. Compatibility scheme of forEach method of JS array: self-implementation
IE8's array object has no forEach method, halo. So you can declare it yourself, the code is as follows:
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O [k];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
In addition, the js feature that IE8 does not support is more than forEach, and it will be supplemented when it is encountered in the future.
6. SVG graphics compatibility solution: graceful degradation
Reference article: http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/
There is really no direct compatibility for svg graphics, so use graceful degradation to display alternative jpg, png or gif images under IE8. There are three practical methods: one is to use js to modify the src attribute of <img>, which is omitted here; the other is to use HTML hack to achieve graceful degradation, similar to the following code:
<svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96" /> </svg>
Browsers that support the <svg> tag will display svg.svg, while older browsers will ignore the <svg> tag and render the <image> tag to display svg.png.
In addition, there is a more ingenious method:
<img src="image.svg" onerror="this.src='image.png'">
This method has drawbacks: when there is a problem with image.png and cannot be loaded, it will fall into an infinite loop.
Seven, Canvas compatible solution: Excanvas.js
Download address: http://code.google.com/p/explorercanvas/downloads/list
Canvas is very powerful, and the work of IE8 compatibility is also very heavy. There may be a large number of cases to use graceful degradation, but in some cases you can use the Excanvas.js library from Google. It uses the VML object supported by IE to simulate the drawing of Canvas, which is available in some cases, but cannot exhaust all the functions of Canvas.
How to use: Reference the Excanvas.js file in the page, preferably in the <head> tag.
For specific precautions, please refer to the article: http://rockyuse.iteye.com/blog/1618298
8. Canvas+WebGL compatible solution: graceful degradation
Recently, the WebGL library - Three.js has become more and more popular, but it only supports IE11+, and the compatibility of IE8 seems to be unsolved... So it can only be downgraded gracefully, but the effect must be greatly reduced. If there is a compatible solution, please let me know!