因为ie8不支持html5，也不支持css3媒体查询，所以要想在ie8浏览器实现响应式布局我们就需要引用如下两个插件。
css3-mediaqueries.js and html5.js
引用方法如下
<!--[if lt IE 9]>
<script src="./js/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="./js/css3-mediaqueries.js"></script>
<![endif]-->
我的放在js文件夹
html5.js 代码如下：
/*
HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
Uncompressed source: https://github.com/aFarkas/html5shiv
*/
(function(l, f) {
function m() {
var a = e.elements;
return "string" == typeof a ? a.split(" ") : a
}
function i(a) {
var b = n[a[o]];
b || (b = {}, h++, a[o] = h, n[h] = b);
return b
}
function p(a, b, c) {
b || (b = f);
if (g) return b.createElement(a);
c || (c = i(b));
b = c.cache[a] ? c.cache[a].cloneNode() : r.test(a) ? (c.cache[a] = c.createElem(a)).cloneNode() : c.createElem(a);
return b.canHaveChildren && !s.test(a) ? c.frag.appendChild(b) : b
}
function t(a, b) {
if (!b.cache) b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag();
a.createElement = function(c) {
return !e.shivMethods ? b.createElem(c) : p(c, a, b)
};
a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + m().join().replace(/w+/g, function(a) {
b.createElem(a);
b.frag.createElement(a);
return 'c("' + a + '")'
}) + ");return n}")(e, b.frag)
}
function q(a) {
a || (a = f);
var b = i(a);
if (e.shivCSS && !j && !b.hasCSS) {
var c, d = a;
c = d.createElement("p");
d = d.getElementsByTagName("head")[0] || d.documentElement;
c.innerHTML = "x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
c = d.insertBefore(c.lastChild, d.firstChild);
b.hasCSS = !! c
}
g || t(a, b);
return a
}
var k = l.html5 || {}, s = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
r = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,
j, o = "_html5shiv",
h = 0,
n = {}, g;
(function() {
try {
var a = f.createElement("a");
a.innerHTML = "<xyz></xyz>";
j = "hidden" in a;
var b;
if (!(b = 1 == a.childNodes.length)) {
f.createElement("a");
var c = f.createDocumentFragment();
b = "undefined" == typeof c.cloneNode ||
"undefined" == typeof c.createDocumentFragment || "undefined" == typeof c.createElement
}
g = b
} catch (d) {
g = j = !0
}
})();
var e = {
elements: k.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",
version: "3.6.2pre",
shivCSS: !1 !== k.shivCSS,
supportsUnknownElements: g,
shivMethods: !1 !== k.shivMethods,
type: "default",
shivDocument: q,
createElement: p,
createDocumentFragment: function(a, b) {
a || (a = f);
if (g) return a.createDocumentFragment();
for (var b = b || i(a), c = b.frag.cloneNode(), d = 0, e = m(), h = e.length; d < h; d++) c.createElement(e[d]);
return c
}
};
l.html5 = e;
q(f)
})(this, document);
css3-mediaqueries.js 代码如下：
if(typeof Object.create!=="function"){Object.create=function(o){function F(){};F.prototype=o;return new F()}}var ua={toString:function(){return navigator.userAgent},test:function(s){return this.toString().toLowerCase().indexOf(s.toLowerCase())>-1}};ua.version=(ua.toString().toLowerCase().match(/[sS]+(?:rv|it|ra|ie)[/: ]([d.]+)/)||[])[1];ua.webkit=ua.test("webkit");ua.gecko=ua.test("gecko")&&!ua.webkit;ua.opera=ua.test("opera");ua.ie=ua.test("msie")&&!ua.opera;ua.ie6=ua.ie&&document.compatMode&&typeof document.documentElement.style.maxHeight==="undefined";ua.ie7=ua.ie&&document.documentElement&&typeof document.documentElement.style.maxHeight!=="undefined"&&typeof XDomainRequest==="undefined";ua.ie8=ua.ie&&typeof XDomainRequest!=="undefined";var domReady=function(){var _1=[];var _2=function(){if(!arguments.callee.done){arguments.callee.done=true;for(var i=0;i<_1.length;i++){_1[i]()}}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",_2,false)}if(ua.ie){(function(){try{document.documentElement.doScroll("left");document.body.length}catch(e){setTimeout(arguments.callee,50);return}_2()})();document.onreadystatechange=function(){if(document.readyState==="complete"){document.onreadystatechange=null;_2()}}}if(ua.webkit&&document.readyState){(function(){if(document.readyState!=="loading"){_2()}else{setTimeout(arguments.callee,10)}})()}window.onload=_2;return function(fn){if(typeof fn==="function"){if(_2.done){fn()}else{_1[_1.length]=fn}}return fn}}();var cssHelper=function(){var _3={BLOCKS:/[^s{][^{]*{(?:[^{}]*{[^{}]*}[^{}]*|[^{}]*)*}/g,BLOCKS_INSIDE:/[^s{][^{]*{[^{}]*}/g,DECLARATIONS:/[a-zA-Z-]+[^;]*:[^;]+;/g,RELATIVE_URLS:/url(['"]?([^/)'"][^:)'"]+)['"]?)/g,REDUNDANT_COMPONENTS:/(?:/*([^*\\]|*(?!/))+*/|@import[^;]+;|@-moz-documents*url-prefix()s*{(([^{}])+{([^{}])+}([^{}])+)+})/g,REDUNDANT_WHITESPACE:/s*(,|:|;|{|})s*/g,MORE_WHITESPACE:/s{2,}/g,FINAL_SEMICOLONS:/;}/g,NOT_WHITESPACE:/S+/g};var _4,_5=false;var _6=[];var _7=function(fn){if(typeof fn==="function"){_6[_6.length]=fn}};var _8=function(){for(var i=0;i<_6.length;i++){_6[i](_4)}};var _9={};var _a=function(n,v){if(_9[n]){var _b=_9[n].listeners;if(_b){for(var i=0;i<_b.length;i++){_b[i](v)}}}};var _c=function(_d,_e,_f){if(ua.ie&&!window.XMLHttpRequest){window.XMLHttpRequest=function(){return new ActiveXObject("Microsoft.XMLHTTP")}}if(!XMLHttpRequest){return""}var r=new XMLHttpRequest();try{r.open("get",_d,true);r.setRequestHeader("X_REQUESTED_WITH","XMLHttpRequest")}catch(e){_f();return}var _10=false;setTimeout(function(){_10=true},5000);document.documentElement.style.cursor="progress";r.onreadystatechange=function(){if(r.readyState===4&&!_10){if(!r.status&&location.protocol==="file:"||(r.status>=200&&r.status<300)||r.status===304||navigator.userAgent.indexOf("Safari")>-1&&typeof r.status==="undefined"){_e(r.responseText)}else{_f()}document.documentElement.style.cursor="";r=null}};r.send("")};var _11=function(_12){_12=_12.replace(_3.REDUNDANT_COMPONENTS,"");_12=_12.replace(_3.REDUNDANT_WHITESPACE,"$1");_12=_12.replace(_3.MORE_WHITESPACE," ");_12=_12.replace(_3.FINAL_SEMICOLONS,"}");return _12};var _13={mediaQueryList:function(s){var o={};var idx=s.indexOf("{");var lt=s.substring(0,idx);s=s.substring(idx+1,s.length-1);var mqs=[],rs=[];var qts=lt.toLowerCase().substring(7).split(",");for(var i=0;i<qts.length;i++){mqs[mqs.length]=_13.mediaQuery(qts[i],o)}var rts=s.match(_3.BLOCKS_INSIDE);if(rts!==null){for(i=0;i<rts.length;i++){rs[rs.length]=_13.rule(rts[i],o)}}o.getMediaQueries=function(){return mqs};o.getRules=function(){return rs};o.getListText=function(){return lt};o.getCssText=function(){return s};return o},mediaQuery:function(s,mql){s=s||"";var not=false,_14;var exp=[];var _15=true;var _16=s.match(_3.NOT_WHITESPACE);for(var i=0;i<_16.length;i++){var _17=_16[i];if(!_14&&(_17==="not"||_17==="only")){if(_17==="not"){not=true}}else{if(!_14){_14=_17}else{if(_17.charAt(0)==="("){var _18=_17.substring(1,_17.length-1).split(":");exp[exp.length]={mediaFeature:_18[0],value:_18[1]||null}}}}}return{getList:function(){return mql||null},getValid:function(){return _15},getNot:function(){return not},getMediaType:function(){return _14},getExpressions:function(){return exp}}},rule:function(s,mql){var o={};var idx=s.indexOf("{");var st=s.substring(0,idx);var ss=st.split(",");var ds=[];var dts=s.substring(idx+1,s.length-1).split(";");for(var i=0;i<dts.length;i++){ds[ds.length]=_13.declaration(dts[i],o)}o.getMediaQueryList=function(){return mql||null};o.getSelectors=function(){return ss};o.getSelectorText=function(){return st};o.getDeclarations=function(){return ds};o.getPropertyValue=function(n){for(var i=0;i<ds.length;i++){if(ds[i].getProperty()===n){return ds[i].getValue()}}return null};return o},declaration:function(s,r){var idx=s.indexOf(":");var p=s.substring(0,idx);var v=s.substring(idx+1);return{getRule:function(){return r||null},getProperty:function(){return p},getValue:function(){return v}}}};var _19=function(el){if(typeof el.cssHelperText!=="string"){return}var o={mediaQueryLists:[],rules:[],selectors:{},declarations:[],properties:{}};var _1a=o.mediaQueryLists;var ors=o.rules;var _1b=el.cssHelperText.match(_3.BLOCKS);if(_1b!==null){for(var i=0;i<_1b.length;i++){if(_1b[i].substring(0,7)==="@media "){_1a[_1a.length]=_13.mediaQueryList(_1b[i]);ors=o.rules=ors.concat(_1a[_1a.length-1].getRules())}else{ors[ors.length]=_13.rule(_1b[i])}}}var oss=o.selectors;var _1c=function(r){var ss=r.getSelectors();for(var i=0;i<ss.length;i++){var n=ss[i];if(!oss[n]){oss[n]=[]}oss[n][oss[n].length]=r}};for(i=0;i<ors.length;i++){_1c(ors[i])}var ods=o.declarations;for(i=0;i<ors.length;i++){ods=o.declarations=ods.concat(ors[i].getDeclarations())}var ops=o.properties;for(i=0;i<ods.length;i++){var n=ods[i].getProperty();if(!ops[n]){ops[n]=[]}ops[n][ops[n].length]=ods[i]}el.cssHelperParsed=o;_4[_4.length]=el;return o};var _1d=function(el,s){el.cssHelperText=_11(s||el.innerHTML);return _19(el)};var _1e=function(){_5=true;_4=[];var _1f=[];var _20=function(){for(var i=0;i<_1f.length;i++){_19(_1f[i])}var _21=document.getElementsByTagName("style");for(i=0;i<_21.length;i++){_1d(_21[i])}_5=false;_8()};var _22=document.getElementsByTagName("link");for(var i=0;i<_22.length;i++){var _23=_22[i];if(_23.getAttribute("rel").indexOf("style")>-1&&_23.href&&_23.href.length!==0&&!_23.disabled){_1f[_1f.length]=_23}}if(_1f.length>0){var c=0;var _24=function(){c++;if(c===_1f.length){_20()}};var _25=function(_26){var _27=_26.href;_c(_27,function(_28){_28=_11(_28).replace(_3.RELATIVE_URLS,"url("+_27.substring(0,_27.lastIndexOf("/"))+"/$1)");_26.cssHelperText=_28;_24()},_24)};for(i=0;i<_1f.length;i++){_25(_1f[i])}}else{_20()}};var _29={mediaQueryLists:"array",rules:"array",selectors:"object",declarations:"array",properties:"object"};var _2a={mediaQueryLists:null,rules:null,selectors:null,declarations:null,properties:null};var _2b=function(_2c,v){if(_2a[_2c]!==null){if(_29[_2c]==="array"){return(_2a[_2c]=_2a[_2c].concat(v))}else{var c=_2a[_2c];for(var n in v){if(v.hasOwnProperty(n)){if(!c[n]){c[n]=v[n]}else{c[n]=c[n].concat(v[n])}}}return c}}};var _2d=function(_2e){_2a[_2e]=(_29[_2e]==="array")?[]:{};for(var i=0;i<_4.length;i++){_2b(_2e,_4[i].cssHelperParsed[_2e])}return _2a[_2e]};domReady(function(){var els=document.body.getElementsByTagName("*");for(var i=0;i<els.length;i++){els[i].checkedByCssHelper=true}if(document.implementation.hasFeature("MutationEvents","2.0")||window.MutationEvent){document.body.addEventListener("DOMNodeInserted",function(e){var el=e.target;if(el.nodeType===1){_a("DOMElementInserted",el);el.checkedByCssHelper=true}},false)}else{setInterval(function(){var els=document.body.getElementsByTagName("*");for(var i=0;i<els.length;i++){if(!els[i].checkedByCssHelper){_a("DOMElementInserted",els[i]);els[i].checkedByCssHelper=true}}},1000)}});var _2f=function(d){if(typeof window.innerWidth!="undefined"){return window["inner"+d]}else{if(typeof document.documentElement!="undefined"&&typeof document.documentElement.clientWidth!="undefined"&&document.documentElement.clientWidth!=0){return document.documentElement["client"+d]}}};return{addStyle:function(s,_30){var el;if(null!==document.getElementById("css-mediaqueries-js")){el=document.getElementById("css-mediaqueries-js")}else{el=document.createElement("style");el.setAttribute("type","text/css");el.setAttribute("id","css-mediaqueries-js");document.getElementsByTagName("head")[0].appendChild(el)}if(el.styleSheet){el.styleSheet.cssText+=s}else{el.appendChild(document.createTextNode(s))}el.addedWithCssHelper=true;if(typeof _30==="undefined"||_30===true){cssHelper.parsed(function(_31){var o=_1d(el,s);for(var n in o){if(o.hasOwnProperty(n)){_2b(n,o[n])}}_a("newStyleParsed",el)})}else{el.parsingDisallowed=true}return el},removeStyle:function(el){if(el.parentNode){return el.parentNode.removeChild(el)}},parsed:function(fn){if(_5){_7(fn)}else{if(typeof _4!=="undefined"){if(typeof fn==="function"){fn(_4)}}else{_7(fn);_1e()}}},mediaQueryLists:function(fn){cssHelper.parsed(function(_32){fn(_2a.mediaQueryLists||_2d("mediaQueryLists"))})},rules:function(fn){cssHelper.parsed(function(_33){fn(_2a.rules||_2d("rules"))})},selectors:function(fn){cssHelper.parsed(function(_34){fn(_2a.selectors||_2d("selectors"))})},declarations:function(fn){cssHelper.parsed(function(_35){fn(_2a.declarations||_2d("declarations"))})},properties:function(fn){cssHelper.parsed(function(_36){fn(_2a.properties||_2d("properties"))})},broadcast:_a,addListener:function(n,fn){if(typeof fn==="function"){if(!_9[n]){_9[n]={listeners:[]}}_9[n].listeners[_9[n].listeners.length]=fn}},removeListener:function(n,fn){if(typeof fn==="function"&&_9[n]){var ls=_9[n].listeners;for(var i=0;i<ls.length;i++){if(ls[i]===fn){ls.splice(i,1);i-=1}}}},getViewportWidth:function(){return _2f("Width")},getViewportHeight:function(){return _2f("Height")}}}();domReady(function enableCssMediaQueries(){var _37;var _38={LENGTH_UNIT:/[0-9]+(em|ex|px|in|cm|mm|pt|pc)$/,RESOLUTION_UNIT:/[0-9]+(dpi|dpcm)$/,ASPECT_RATIO:/^[0-9]+/[0-9]+$/,ABSOLUTE_VALUE:/^[0-9]*(.[0-9]+)*$/};var _39=[];var _3a=function(){var id="css3-mediaqueries-test";var el=document.createElement("div");el.id=id;var _3b=cssHelper.addStyle("@media all and (width) { #"+id+" { 1px !important; } }",false);document.body.appendChild(el);var ret=el.offsetWidth===1;_3b.parentNode.removeChild(_3b);el.parentNode.removeChild(el);_3a=function(){return ret};return ret};var _3c=function(){_37=document.createElement("div");_37.style.cssText="position:absolute;top:-9999em;left:-9999em;"+"margin:0;border:none;padding:0;1em;font-size:1em;";document.body.appendChild(_37);if(_37.offsetWidth!==16){_37.style.fontSize=16/_37.offsetWidth+"em"}_37.style.width=""};var _3d=function(_3e){_37.style.width=_3e;var _3f=_37.offsetWidth;_37.style.width="";return _3f};var _40=function(_41,_42){var l=_41.length;var min=(_41.substring(0,4)==="min-");var max=(!min&&_41.substring(0,4)==="max-");if(_42!==null){var _43;var _44;if(_38.LENGTH_UNIT.exec(_42)){_43="length";_44=_3d(_42)}else{if(_38.RESOLUTION_UNIT.exec(_42)){_43="resolution";_44=parseInt(_42,10);var _45=_42.substring((_44+"").length)}else{if(_38.ASPECT_RATIO.exec(_42)){_43="aspect-ratio";_44=_42.split("/")}else{if(_38.ABSOLUTE_VALUE){_43="absolute";_44=_42}else{_43="unknown"}}}}}var _46,_47;if("device-width"===_41.substring(l-12,l)){_46=screen.width;if(_42!==null){if(_43==="length"){return((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44))}else{return false}}else{return _46>0}}else{if("device-height"===_41.substring(l-13,l)){_47=screen.height;if(_42!==null){if(_43==="length"){return((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44))}else{return false}}else{return _47>0}}else{if("width"===_41.substring(l-5,l)){_46=document.documentElement.clientWidth||document.body.clientWidth;if(_42!==null){if(_43==="length"){return((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44))}else{return false}}else{return _46>0}}else{if("height"===_41.substring(l-6,l)){_47=document.documentElement.clientHeight||document.body.clientHeight;if(_42!==null){if(_43==="length"){return((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44))}else{return false}}else{return _47>0}}else{if("orientation"===_41.substring(l-11,l)){_46=document.documentElement.clientWidth||document.body.clientWidth;_47=document.documentElement.clientHeight||document.body.clientHeight;if(_43==="absolute"){return(_44==="portrait")?(_46<=_47):(_46>_47)}else{return false}}else{if("aspect-ratio"===_41.substring(l-12,l)){_46=document.documentElement.clientWidth||document.body.clientWidth;_47=document.documentElement.clientHeight||document.body.clientHeight;var _48=_46/_47;var _49=_44[1]/_44[0];if(_43==="aspect-ratio"){return((min&&_48>=_49)||(max&&_48<_49)||(!min&&!max&&_48===_49))}else{return false}}else{if("device-aspect-ratio"===_41.substring(l-19,l)){return _43==="aspect-ratio"&&screen.width*_44[1]===screen.height*_44[0]}else{if("color-index"===_41.substring(l-11,l)){var _4a=Math.pow(2,screen.colorDepth);if(_42!==null){if(_43==="absolute"){return((min&&_4a>=_44)||(max&&_4a<_44)||(!min&&!max&&_4a===_44))}else{return false}}else{return _4a>0}}else{if("color"===_41.substring(l-5,l)){var _4b=screen.colorDepth;if(_42!==null){if(_43==="absolute"){return((min&&_4b>=_44)||(max&&_4b<_44)||(!min&&!max&&_4b===_44))}else{return false}}else{return _4b>0}}else{if("resolution"===_41.substring(l-10,l)){var res;if(_45==="dpcm"){res=_3d("1cm")}else{res=_3d("1in")}if(_42!==null){if(_43==="resolution"){return((min&&res>=_44)||(max&&res<_44)||(!min&&!max&&res===_44))}else{return false}}else{return res>0}}else{return false}}}}}}}}}}};var _4c=function(mq){var _4d=mq.getValid();var _4e=mq.getExpressions();var l=_4e.length;if(l>0){for(var i=0;i<l&&_4d;i++){_4d=_40(_4e[i].mediaFeature,_4e[i].value)}var not=mq.getNot();return(_4d&&!not||not&&!_4d)}};var _4f=function(mql){var mqs=mql.getMediaQueries();var t={};for(var i=0;i<mqs.length;i++){if(_4c(mqs[i])){t[mqs[i].getMediaType()]=true}}var s=[],c=0;for(var n in t){if(t.hasOwnProperty(n)){if(c>0){s[c++]=","}s[c++]=n}}if(s.length>0){_39[_39.length]=cssHelper.addStyle("@media "+s.join("")+"{"+mql.getCssText()+"}",false)}};var _50=function(_51){for(var i=0;i<_51.length;i++){_4f(_51[i])}if(ua.ie){document.documentElement.style.display="block";setTimeout(function(){document.documentElement.style.display=""},0);setTimeout(function(){cssHelper.broadcast("cssMediaQueriesTested")},100)}else{cssHelper.broadcast("cssMediaQueriesTested")}};var _52=function(){for(var i=0;i<_39.length;i++){cssHelper.removeStyle(_39[i])}_39=[];cssHelper.mediaQueryLists(_50)};var _53=0;var _54=function(){var _55=cssHelper.getViewportWidth();var _56=cssHelper.getViewportHeight();if(ua.ie){var el=document.createElement("div");el.style.width="100px";el.style.height="100px";el.style.position="absolute";el.style.top="-9999em";el.style.overflow="scroll";document.body.appendChild(el);_53=el.offsetWidth-el.clientWidth;document.body.removeChild(el)}var _57;var _58=function(){var vpw=cssHelper.getViewportWidth();var vph=cssHelper.getViewportHeight();if(Math.abs(vpw-_55)>_53||Math.abs(vph-_56)>_53){_55=vpw;_56=vph;clearTimeout(_57);_57=setTimeout(function(){if(!_3a()){_52()}else{cssHelper.broadcast("cssMediaQueriesTested")}},500)}};window.onresize=function(){var x=window.onresize||function(){};return function(){x();_58()}}()};var _59=document.documentElement;_59.style.marginLeft="-32767px";setTimeout(function(){_59.style.marginTop=""},20000);return function(){if(!_3a()){cssHelper.addListener("newStyleParsed",function(el){_50(el.cssHelperParsed.mediaQueryLists)});cssHelper.addListener("cssMediaQueriesTested",function(){if(ua.ie){_59.style.width="1px"}setTimeout(function(){_59.style.width="";_59.style.marginLeft=""},0);cssHelper.removeListener("cssMediaQueriesTested",arguments.callee)});_3c();_52()}else{_59.style.marginLeft=""}_54()}}());try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}