兼容IE8
由於IE8不支持HTML5，而它又是Win7的默認瀏覽器，我們即使討厭它，在這幾年卻也拿它沒辦法。
最近做了個需要兼容IE8的項目，不可避免地用了HTML5+CSS3，甚至canvas和svg，做兼容工作的時候不僅叫苦不叠。一個項目下來後，倒是收集了一些誌於讓HTML5兼容IE8的庫，還有一些零散的代碼和優雅降級的技巧，整理如下。IE8的兼容工作是個大活，這篇文章還不完整，肯定有很多疏漏和不足，望讀者能在評論區指正，同時我也會在之後的項目中逐漸豐富這篇文章。
一、HTML5標簽兼容方案：html5shiv.js
GitHub地址：https://github.com/aFarkas/html5shiv/
IE8不支持HTML5的新標簽，如<header>、<nav>等標簽在IE8無法渲染。html5shiv.js可幫助IE6-8瀏覽器兼容HTML5語義化標簽。
使用方法：在頁面中引用html5shiv.js文件。必須添加在頁面的<head>元素內，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個js文件不能在頁面底部引用。
二、CSS3媒體查詢兼容方案：Respond.js
GitHub地址：https://github.com/scottjehl/Respond
IE8不支持CSS媒體查詢，對響應式設計大大不利。Respond.js可幫助IE6-8兼容“min/max-width”媒體查詢條件。
使用方法：在頁面中所有css文件的引用位置之後引用Respond.js。而且Respond.js的引用得越早，用戶看到頁面閃爍的機會越小。
三、CSS3字體單位“rem”兼容方案：rem.js
GitHub地址：https://github.com/chuckcarpenter/REM-unit-polyfill
CSS3引入了新的字體大小單位rem，與em的“相對於其父元素來設置字體大小”的功能不同，rem是相對於根元素<html>的字體大小比率單位，成了目前主流的單位之一。IE9+開始支持，IE8就只能通過引入js庫來支持了。
使用方法：在頁面中引用rem.js文件。需要引用在頁腳，也就是<body>末尾，在所有css文件引用和DOM元素之後。
四、CSS3“background-size”屬性的“cover”和“contain”屬性值兼容方案：background-size polyfill
GitHub地址：https://github.com/louisremi/background-size-polyfill
“background-size”是CSS3新引入的屬性，其中有兩個屬性值非常常用，分別為“cover”和“contain”。“cover”可以把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，背景圖像的某些部分也許無法顯示在背景定位區域中。“contain”可以把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。IE8同樣不支持，非常不方便。這時可以引用“background-size polyfill”庫來兼容。
使用方法：與以上幾個庫不同，“background-size polyfill”的代碼文件需要在css中引用。在所有用到這兩個“background-size”屬性值的地方，加一行“-ms-behavior”屬性：
.selector {
background-size: cover;
/* 以下相對路徑是相對於文檔，而非css文件！ */
/* 使用絕對路徑可以避免混淆 */
-ms-behavior: url(/backgroundsize.min.htc);
}
五、JS數組的forEach方法兼容方案：自行實現
IE8的數組對象沒有forEach方法，暈。所以自行聲明即可，代碼如下：
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++;
}
};
}
此外，IE8不支持的js特性不止forEach一種，等以後遇到了再作補充。
六、SVG圖形兼容方案：優雅降級
參考文章：http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/
對於svg圖形是真的無法直接兼容了，因此使用優雅降級，在IE8下顯示替代的jpg、png或gif圖片。有三種比較實用的方法：一是用js修改<img>的src屬性，這裏省略；二是用HTML的hack實現優雅降級，類似於如下代碼：
<svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96" /> </svg>
支持<svg>標簽的瀏覽器會顯示svg.svg，老版本瀏覽器會無視<svg>標簽，渲染<image>標簽，從而顯示svg.png。
此外，還有一種比較巧妙的方法：
<img src="image.svg" onerror="this.src=‘image.png‘">
此法有弊端：當image.png出現問題無法載入時，會陷入死循環。
七、Canvas兼容方案：Excanvas.js
下載地址：http://code.google.com/p/explorercanvas/downloads/list
Canvas的功能非常強大，兼容IE8的工作也很繁巨。可能有很大一部分情況要用優雅降級，但是一些情況下可以使用Google出的Excanvas.js庫。它是利用IE支持的VML對象來模擬Canvas的繪圖的，有些情況下可用，但無法窮盡Canvas的所有功能。
使用方法：在頁面中引用Excanvas.js文件，最好在<head>標簽中。
具體註意事項可以參考文章：http://rockyuse.iteye.com/blog/1618298
八、Canvas+WebGL兼容方案：優雅降級
【轉載】
兼容IE8