Web前端頁面的瀏覽器兼容性測試心得（三）總結一些IE8兼容問題的解決方案

時間 2019-11-18

標籤 web 前端頁面瀏覽器兼容性測試心得總結一些 ie8 兼容問題解決方案欄目 HTML 简体版

原文原文鏈接

因爲IE8不支持HTML5，而它又是Win7的默認瀏覽器，咱們即便討厭它，在這幾年卻也拿它沒辦法。css

最近作了個須要兼容IE8的項目，不可避免地用了HTML5+CSS3，甚至canvas和svg，作兼容工做的時候不由叫苦連天。一個項目下來後，卻是收集了一些志於讓HTML5兼容IE8的庫，還有一些零散的代碼和優雅降級的技巧，整理以下。IE8的兼容工做是個大活，這篇文章還不完整，確定有不少疏漏和不足，望讀者能在評論區指正，同時我也會在以後的項目中逐漸豐富這篇文章。html

1、HTML5標籤兼容方案：html5shiv.js

GitHub地址：https://github.com/aFarkas/html5shiv/html5

IE8不支持HTML5的新標籤，如<header>、<nav>等標籤在IE8沒法渲染。html5shiv.js可幫助IE6-8瀏覽器兼容HTML5語義化標籤。git

使用方法：在頁面中引用html5shiv.js文件。必須添加在頁面的<head>元素內，由於IE瀏覽器必須在元素解析前知道這個元素，因此這個js文件不能在頁面底部引用。github

2、CSS3媒體查詢兼容方案：Respond.js

GitHub地址：https://github.com/scottjehl/Respondcanvas

IE8不支持CSS媒體查詢，對響應式設計大大不利。Respond.js可幫助IE6-8兼容「min/max-width」媒體查詢條件。數組

使用方法：在頁面中全部css文件的引用位置以後引用Respond.js。並且Respond.js的引用得越早，用戶看到頁面閃爍的機會越小。瀏覽器

3、CSS3字體單位「rem」兼容方案：rem.js

GitHub地址：https://github.com/chuckcarpenter/REM-unit-polyfillsvg

CSS3引入了新的字體大小單位rem，與em的「相對於其父元素來設置字體大小」的功能不一樣，rem是相對於根元素<html>的字體大小比率單位，成了目前主流的單位之一。IE9+開始支持，IE8就只能經過引入js庫來支持了。wordpress

使用方法：在頁面中引用rem.js文件。須要引用在頁腳，也就是<body>末尾，在全部css文件引用和DOM元素以後。

4、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);
}

5、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一種，等之後遇到了再做補充。

6、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出現問題沒法載入時，會陷入死循環。

7、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

8、Canvas+WebGL兼容方案：優雅降級

最近WebGL庫——Three.js愈來愈流行了，但它只支持IE11+，IE8的兼容好像無解……因此只能優雅降級，可是效果確定大打折扣。若有兼容方案，還請不吝賜教！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。