解决兼容性的库
HTML5標(biāo)簽兼容方案：html5shiv.js
[GitHub地址：https://github.com/aFarkas/html5shiv/]
IE8不支持HTML5的新標(biāo)簽，如<header>、<nav>等標(biāo)簽在IE8無法渲染。html5shiv.js可幫助IE6-8瀏覽器兼容HTML5語義化標(biāo)簽。
使用方法：在頁面中引用html5shiv.js文件。必須添加在頁面的
CSS3媒體查詢兼容方案：Respond.js
[GitHub地址：https://github.com/scottjehl/Respond]
IE8不支持CSS媒體查詢，對(duì)響應(yīng)式設(shè)計(jì)大大不利。Respond.js可幫助IE6-8兼容“min/max-width”媒體查詢條件。
使用方法：在頁面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早，用戶看到頁面閃爍的機(jī)會(huì)越小。
CSS3字體單位“rem”兼容方案：rem.js
[GitHub地址：https://github.com/chuckcarpenter/REM-unit-polyfill]
CSS3引入了新的字體大小單位rem，與em的“相對(duì)于其父元素來設(shè)置字體大小”的功能不同，rem是相對(duì)于根元素<html>的字體大小比率單位，成了目前主流的單位之一。IE9+開始支持，IE8就只能通過引入js庫來支持了。
使用方法：在頁面中引用rem.js文件。需要引用在頁腳，也就是
CSS3“background-size”屬性的“cover”和“contain”屬性值兼容方案：background-size polyfill
[GitHub地址：https://github.com/louisremi/background-size-polyfill]
“background-size”是CSS3新引入的屬性，其中有兩個(gè)屬性值非常常用，分別為“cover”和“contain”。“cover”可以把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域，背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。“contain”可以把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。IE8同樣不支持，非常不方便。這時(shí)可以引用“background-size polyfill”庫來兼容。
使用方法：與以上幾個(gè)庫不同，“background-size polyfill”的代碼文件需要在css中引用。在所有用到這兩個(gè)“background-size”屬性值的地方，加一行“-ms-behavior”屬性：
JS數(shù)組的forEach方法兼容方案：自行實(shí)現(xiàn)
IE8的數(shù)組對(duì)象沒有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++;}}; }SVG圖形兼容方案：優(yōu)雅降級(jí)
[參考文章：http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/]
對(duì)于svg圖形是真的無法直接兼容了，因此使用優(yōu)雅降級(jí)，在IE8下顯示替代的jpg、png或gif圖片。有三種比較實(shí)用的方法：一是用js修改的src屬性，這里省略；二是用HTML的hack實(shí)現(xiàn)優(yōu)雅降級(jí)，類似于如下代碼：
<svg width="96" height="96"><image xlink:href="svg.svg" src="svg.png" width="96" height="96" /> </svg>支持<svg>標(biāo)簽的瀏覽器會(huì)顯示svg.svg，老版本瀏覽器會(huì)無視<svg>標(biāo)簽，渲染<image>標(biāo)簽，從而顯示svg.png。
此外，還有一種比較巧妙的方法：
此法有弊端：當(dāng)image.png出現(xiàn)問題無法載入時(shí)，會(huì)陷入死循環(huán)。
Canvas兼容方案：Excanvas.js
[下載地址：http://code.google.com/p/explorercanvas/downloads/list]
Canvas的功能非常強(qiáng)大，兼容IE8的工作也很繁巨。可能有很大一部分情況要用優(yōu)雅降級(jí)，但是一些情況下可以使用Google出的Excanvas.js庫。它是利用IE支持的VML對(duì)象來模擬Canvas的繪圖的，有些情況下可用，但無法窮盡Canvas的所有功能。
使用方法：在頁面中引用Excanvas.js文件，最好在<head>標(biāo)簽中。
[具體注意事項(xiàng)可以參考文章：http://rockyuse.iteye.com/blog/1618298]
轉(zhuǎn)載于:https://www.cnblogs.com/Ivy-s/p/7452359.html
總結(jié)
- 上一篇： php订单模块解耦,PHP快速使用Rab
- 下一篇： 《工业控制网络安全技术与实践》一一第3章