JS Solution IE8 does not support the HTML5,CSS3 problem (respond.js use note)

IE8.0 and below do not support HTML5,CSS3 parsing. So far the usage rate of IE8 below 10%, the site is still necessary to be compatible.

1, at the end of all your CSS to judge the introduction of two JS files.

Html5.js is used to enable IE8 browser to convert H5 tags into block elements

Respond.js is to let IE8 support CSS3 JS

<!--[if lt ie9]>    <script src= "html5.js" ></script>    <script src= "Respond.js" ></script> <! [endif]-->

2,html5.js File Contents

/** * @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/!function(A, B) {functionC (A, b) {varC=a.createelement ("P"), D=a.getelementsbytagname ("Head") [0]| | A.documentelement;returnC.innerhtml= "x<style>" +b+ "</style>", D.insertbefore (C.lastchild,d.firstchild)}functionD () {vara=t.elements;return"string" = =typeofA?a.split (""): A}functionE (A, b) {varc=t.elements; " string "! =typeofc&& (C=c.join ("")), "string"! =typeofa&& (A=a.join ("")), t.elements=c+ "" +a,j (b)}functionF (a) {varB=S[A[Q]];returnb| | (b={},r++,a[q]=r,s[r]=b), B}functionG (a,c,d) {if(c| | (c=b), L)returnC.createelement (a);d | | (D=f (c));varEreturnE=d.cache[a]?d.cache[a].clonenode ():p. Test (a)? (D.cache[a]=d.createelem (a)). CloneNode ():d. Createelem (a),!e.canhavechildren| | O.test (a) | | E.tagurn?e:d.frag.appendchild (E)}functionH (a,c) {if(a| | (a=b), L)returnA.createdocumentfragment (); c=c| | f (a); for(varE=c.frag.clonenode (), G=0,h=d (), i=h.length;i>g;g++) e.createelement (H[g]);returnEfunctionI (A, b) {b.cache| | (B.cache={},b.createelem=a.createelement,b.createfrag=a.createdocumentfragment,b.frag=b.createfrag ()), A.createelement=function(c) {returnT.shivmethods?g (c,a,b): B.createelem (c)},a.createdocumentfragment=function ("H,f", "return Function () {var n= F.clonenode (),c=n.createelement;h.shivmethods&& ("+d (). Join (). Replace (/[\w\-:]+/g,function(a) {returnB.createelem (a), b.frag.createelement (a), ' C ("' +a+ ') '}) +"); return n} ") (T,b.frag)}functionJ (a) {a| | (A=B);varD=f (a);return!t.shivcss| | k| | d.hascss| | (d.hascss=!! C (A, "article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{ Background: #FF0; color: #000}template{display:none} ")), l| | I (A,d), a}varK,l,m= "3.7.2", n=a.html5| | {},o=/^<|^ (?: Button|map|select|textarea|object|iframe|option|optgroup) $/i,p=/^ (?: 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,q= "_html5shiv", r=0,s={};!function(){Try{varA=b.createelement ("a"); A.innerhtml= "<xyz></xyz>", k= "hidden"incha,l=1==a.childnodes.length| |function() {b.createelement ("a");varA=b.createdocumentfragment ();return"Undefined" = =typeofa.clonenode| | " Undefined "= =typeofa.createdocumentfragment| | " Undefined "= =typeofA.createelement} ()}Catch(c) {k=!0,l=!0}} ();vart={elements:n.elements| | " Abbr article aside audio BDI Canvas data DataList Details dialog figcaption Figure Footer header hgroup main mark meter NA V Output Picture Progress section summary template Time Video ", Version:m,shivcss:n.shivcss!==!1, Supportsunknownelements:l,shivmethods:n.shivmethods!==!1,type: "Default", Shivdocument:j,createelement:g, Createdocumentfragment:h,addelements:e};a.html5=t,j (b)} ( This, document);

View Code

3,respond.js File Contents

/*! Respond.js v1.4.2:min/max-width Media Query Polyfill * Copyright Scott Jehl * Licensed under Https://github.com/scot Tjehl/respond/blob/master/license-mit **/!function(a) {"Use strict"; a.matchmedia=a.matchmedia| |function(a) {varb,c=a.documentelement,d=c.firstelementchild| | C.firstchild,e=a.createelement ("Body"), f=a.createelement ("div");returnF.id= "Mq-test-1", f.style.csstext= "Position:absolute;top:-100em", e.style.background= "None", E.appendChild (f),function(a) {returnF.innerhtml= ' &shy;<style media= "' +a+ '" > #mq-test-1 {width:42px;} </style> ', C.insertbefore (e,d), B=42===f.offsetwidth,c.removechild (e), {Matches:b,media:a}}} (A.document)} ( This),function(a) {"Use strict";functionB () {U (!0)}varC={};a.respond=c,c.update=function(){};varD=[],e=function(){varb=!1;Try{b=NewA.xmlhttprequest}Catch(c) {b=NewA.activexobject ("Microsoft.XMLHTTP")}return function(){returnb}} (), f=function(A, B) {varC=e ();c&& (C.open ("GET", a,!0), c.onreadystatechange=function() {4!==c.readystate| | 200!==c.status&&304!==c.status| | B (C.responsetext)},4!==c.readystate&&c.send (NULL))};if(c.ajax=f,c.queue=d,c.regex={media:/@media [^\{]+\{([^\{\}]*\{[^\}\{]*\}) +/gi,keyframes:/@ (?: \ -(?: o| Moz|webkit) \-)? keyframes[^\{]+\{(?: [^\{\}]*\{[^\}\{]*\}) +[^\}]*\}/gi,urls:/(Url\ () [' "]? ( [^\/\) ' "][^:\) '"]+) [']? (\)) /g,findstyles:/@media * ([^\{]+) \{([\s\s]+?) $/,only:/(only\s+)? ([a-za-z]+) \s?/,minw:/\ ([\s]*min\-width\s*:[\s]* [\s]*[0-9\.] +) (PX|EM) [\s]*\]/,maxw:/\ ([\s]*max\-width\s*:[\s]* ([\s]*[0-9\.] +) (PX|EM) [\s]*\]/},c.mediaqueriessupported=a.matchmedia&&NULL!==a.matchmedia ("only") &&a.matchmedia ("only"). matches,!c.mediaqueriessupported) {varG,h,i,j=a.document,k=j.documentelement,l=[],m=[],n=[],o={},p=30,q=j.getelementsbytagname ("Head") [0]| | K,r=j.getelementsbytagname ("base") [0],s=q.getelementsbytagname ("link"), t=function(){varA,b=j.createelement ("div"),c=j.body,d=k.style.fontsize,e=c&&c.style.fontsize,f=!1;returnB.style.csstext= "Position:absolute;font-size:1em;width:1em", c| | (C=f=j.createelement ("Body"), c.style.background= "None"), k.style.fontsize= "100%", c.style.fontsize= "100%", C.appendchild (b), F&&k.insertbefore (C,k.firstchild), A=b.offsetwidth,f?k.removechild (c): C.removeChild (b) ,k.style.fontsize=d,e&& (c.style.fontsize=e), A=i=parsefloat (a)},u=function(b) {varC= "ClientWidth", d=k[c],e= "Css1compat" ===j.compatmode&&d| | j.body[c]| | D,f={},o=s[s.length-1],r= (NewDate). GetTime ();if(B&AMP;&AMP;G&AMP;&AMP;P&GT;R-G)returnA.cleartimeout (h), H=a.settimeout (u,p),void0;g=r; for(varVinchLif(L.hasownproperty (v)) {varw=l[v],x=w.minw,y=w.maxw,z=NULL===x,a=NULL===y,b= "em";x&& (x=parsefloat (x) * (X.indexof (B) >-1?i| | T (): 1)),y&& (Y=parsefloat (y) * (Y.indexof (B) >-1?i| | T (): 1),w.hasquery&& (z&&a| |! (z| | E&GT;=X) | |! (a| | y>=e)) | | (f[w.media]| | (f[w.media]=[]), F[w.media].push (M[w.rules])} for(varCinchN) n.hasownproperty (C) &&n[c]&&n[c].parentnode===q&&q.removechild (N[C]); n.length=0; for(varDinchFif(F.hasownproperty (D)) {varE=j.createelement ("style"), F=f[d].join ("\ n"); E.type= "Text/css", E.media=d,q.insertbefore (e,o.nextsibling), E.stylesheet? E.stylesheet.csstext=f:e.appendchild (J.createtextnode (F)), N.push (E)}},v=function(a,b,d) {varE=a.replace (C.regex.keyframes, ""). Match (C.regex.media), f=e&&e.length| | 0;b=b.substring (0,b.lastindexof ("/"));varg=function(a) {returnA.replace (C.regex.urls, "$" +b+ "$2$3")},h=!f&&d;b.length&& (b+= "/"),h&& (f=1); for(vari=0;f>i;i++) {varJ,k,n,o;h? (J=d,m.push (g (a))):(J=e[i].match (c.regex.findstyles) &&regexp.$1,m.push (Regexp.$2&&g (RegExp.$2) ), N=j.split (","), o=n.length; for(varp=0;o>p;p++) K=n[p],l.push ({media:k.split (") [0].match (c.regex.only) &&regexp.$2| |" All ", Rules:m.length-1,hasquery:k.indexof (" (") >-1,minw:k.match (C.REGEX.MINW) &&parsefloat (RegExp.$1) + (regexp.$2| | "), Maxw:k.match (C.REGEX.MAXW) &&parsefloat (regexp.$1) + (regexp.$2| |")})} U ()},w=function(){if(d.length) {varB=d.shift (); F (B.href,function(c) {V (c,b.href,b.media), O[b.href]=!0,a.settimeout (function() {W ()},0)})}},x=function(){ for(varb=0;b<s.length;b++) {varc=s[b],e=c.href,f=c.media,g=c.rel&& "stylesheet" ===c.rel.tolowercase ();e&&g&&!o[e]& & (C.stylesheet&&c.stylesheet.rawcsstext? ( V (c.stylesheet.rawcsstext,e,f), o[e]=!0):(!/^ ([a-za-z:]*\/\/)/.test (e) &&!r| | E.replace (Regexp.$1, ""). Split ("/") [0]===a.location.host) && ("//" ===e.substring (0,2) && (e= A.location.protocol+e), D.push ({href:e,media:f}))}w ()};x (), C.update=x,c.getemvalue=t,a.addeventlistener? A.addeventlistener ("resize", b,!1): A.attachevent&&a.attachevent ("onresize", B)}} ( This);

View Code

4, the modified page file upload to the server, the effective. (The local open HTML file does not take effect, the reason is not very clear)

Note: Page JS do not have errors, after success some small details can not be perfectly compatible

5, if still no effect, refer to https://www.cnblogs.com/vitalitycn/p/5715706.html he encountered problems

JS Solution IE8 does not support the HTML5,CSS3 problem (respond.js use note)