Using a compatible IE8 background-size HTC, if it is a display:block element, its background display is fine, but if the element display:none, then the background does not display, or, this element is a pseudo-element, does not display, Forced to rush the duration, do not use the background, directly add a picture element, everything OK
<!--Background-size-polyfill v0.2.0 | (c) 2012-2013 Louis-rémi babé| MIT License--><public:component lightweight= "true" ><public:attach event= "Oncontentready" ONEVENT= " O.init () "/><public:attach event=" Ondocumentready "onevent=" O.init () "/><public:attach EVENT=" Onpropertychange "onevent=" O.handlepropertychange () "/><public:attach event=" Ondetach "ONEVENT=" O.restore () " /><public:attach event= "onresize" for= "window" onevent= "O.handleresize ()"/><public:event NAME= " Onbackgroundupdate "id=" updateevent "/><script type=" Text/javascript ">var o;! function (A, b){var c=/url\ (["']?" (. *?) ["']?\]/,d=/^\s\s*/,e=/\s\s*$/,f=/\s\s*/g,g=/%$/,h={top:0,left:0,bottom:1,right:1,center:.5}, i=a.document,j= "data:image/gif;base64,r0lgodlhaqabaiabap///waaach5baekaaealaaaaaabaaeaaaictaeaow==", k= " Background-size-polyfill ", L=function (){}, M=100,n,p,q,r;function s (){var b=i.createelement ("div"), C=i.createelement ("img"), d=b.style,e=a.style,f=a.currentstyle,g=a.bgsexpando,h =a.firstchild;g&& (g.restore&& (e.backgroundimage=g.restore.backgroundimage,e.position= G.restore.position,e.zindex=g.restore.zindex),h&& "DIV" = = = (h.nodename| | "). toUpperCase () &&h.classname===k&&a.removechild (h)), T (b), b.classname=k,d.top=d.right=d.bottom= d.left=0,d.position= "fixed", t (c), C.,b.appendchild (c), A.insertbefore (b,a.firstchild), A.bgsexpando=g={wrapper :B,img:c,restore:{backgroundimage:e.backgroundimage,position:e.position,zindex:e.zindex}, Current:{}, next:null,processing:!1,loadimg:null,display:!1,changed:!1,ignore:!1,canfixed: "BODY" = = = A.nodename.touppercase () &&b.offsetheight>0},d.position= "Absolute", "Auto" ===f.zindex&& ( e.zindex=0), "Static" ===f.position&& (e.position= "relative"), o={Init:l,handlepropertychange:d,restore:f,handleresize:e}, D ()}function T (a){var b=a.style;b.position= "Absolute", b.display= "block", b.zindex=-1,b.overflow= "hidden", b.visibility= "inherit ", b.width=b.height=b.top=b.right=b.bottom=b.left=b.cursor=" Auto ", b.margin=b.padding=b.border=b.outline= B.minwidth=b.minheight=0,b.background=b.maxwidth=b.maxheight= "None", b.fontsize=b.lineheight= "1em"}function U (a,c,d){var e;c? (E=i.createelement ("img"), e.onload=e.onerror=function () {var c=this.width,e=this.height; Error "===b.event.type&& (c=e=0), A.loadimg=this.onload=this.onerror=null,d (c,e)}, E.src=c): e={Callbackid:b.settimeout (function () {a.loadimg=null,d (0,0)}, 0)},a.loadimg=e,e=null}function V (a){var b=o.handlepropertychange;o.handlepropertychange=l,a (), O.handlepropertychange=b}function W (A, b){var c=a.currentstyle.display;return c!==b.display&& (b.display=c,b.changed=!0), "None"!==c}function X (A, B){var d=a.style,e=a.currentstyle,f=b.restore,i=y (e["Background-size"), K=i.split (""), L={innerwidth:a.offsetwidth-(parsefloat (e.borderleftwidth) | | 0)-(parsefloat (e.borderrightwidth) | | 0), innerheight:a.offsetheight-(parsefloat (e.bordertopwidth) | | 0)-(parsefloat (e.borderbottomwidth) | | 0), Size:i,sizeiskeyword: "Contain" ===i| | " Cover "===i,sizex:k[0],sizey:k.length>1?k[1": "Auto", Posx:e.backgroundpositionx,posy:e.backgroundpositiony, ATTACHMENT:E.BACKGROUNDATTACHMENT,SRC: "", imgwidth:0,imgheight:0}; return l.sizeiskeyword| | ((parsefloat (L.sizex) >=0| | " Auto "===l.sizex) && (parsefloat (l.sizey) >=0| |" Auto "===l.sizey) | | (l.sizex=l.sizey= "Auto"), G.test (L.sizex) && (l.sizex= (L.innerwidth*parsefloat (L.sizex)/100| | 0) + "px"), G.test (L.sizey) && (l.sizey= (L.innerheight*parsefloat (L.sizey)/100| | 0) + "px"), (L.posx in h| | G.test (L.POSX) && (l.posx=h[l.posx]| | Parsefloat (L.POSX)/100| | 0), (L.posy in h| | G.test (L.posy) && (l.posy=h[l.posy]| | Parsefloat (l.posy)/100| | 0), (c.exec (d.backgroundimage) | | []) [1]===j?v (function (){D.backgroundimage=f.backgroundimage}): f.backgroundimage=d.backgroundimage,l.src= (c.exec (e.backgroundimage) | | []) [1],v (function (){d.backgroundimage= "url (" +j+ ")"}), L}function y (a){return String (a). replace (d, ""). Replace (E, ""). Replace (F, "")}function Z (a,c){var d=c.next;function e () {p=b.settimeout (function () {c.processing=!1,z (a,c)}, 0)}! c.processing&&d&& (C.next=null,c.processing=!0,u (c,d.src,function (b,f){d.imgwidth=b,d.imgheight=f,a (c,d)? B (a,c,d,e):e ()}) )}function A (A, b){var c=a.current,d=!1,e;if (a.changed) A.changed=!1,d=!0;else for (E in B) if (B[e]!==c[e]) {d=!0;break}return d}function B (a,c,d,e){var f=c.img,g=f.style,h=d.size,i=d.innerwidth,j=d.innerheight,k=d.imgwidth,l=d.imgheight,m=d.posx,n=d.posy, o= "number" ==typeof m,p= "number" ==typeof n,s= "None", t=0,u=0,v= "Auto", w= "Auto", x= "px", y= "100%", z,a;i&&j &&k&&l&& (c.wrapper.style.position= "fixed" ===d.attachment&&c.canfixed? " Fixed ":"Absolute", F.src=d.src,d.sizeiskeyword? (z=i/j,a=k/l, "contain" ===h&&a>z| | " Cover "===h&&z>a? (U=c (j-i/a) *n) +x,v=y):(T=c ((i-j*a) *m) +x,w=y), g.left=o?t:m,g.top=p?u:n,g.width=v,g.height=w,s= "block"):( g.display= "Block",g.width=d.sizex,g.height=d.sizey,k=f.width,l=f.height,k&&l&& (g.left=o? C ((i-k) *m) +x:m,g.top=p? C ((j-l) *n) +x:n,s= "block")), G.display=s,c.current=d,q=b.settimeout (function () {r=b.settimeout (e,0), Updateevent.fire ()}, 0)} function C (a){var b=0>a;return a=math.floor (Math.Abs (a)), B?-a:a}function D (){var c=a.bgsexpando,d= (b.event| | {}). propertyname,e= "Style.backgroundimage";c.ignore&& (c.ignore=!1,d===e) | | (d===e&&a.style.backgroundimage&& (c.ignore=!0), W (a,c) && (C.next=x (a,c), Z (a,c)))} function E (){b.cleartimeout (n), N=b.settimeout (d,m)}function F (){var c=a.bgsexpando,d,e,f;o={init:l,handlepropertychange:l,restore:l,handleresize:l}, B.cleartimeout (n), B.cleartimeout (p), B.cleartimeout (q), B.cleartimeout (R); try{c&& (d=c.loadimg,d&& (D.onload=d.onerror=null,b.cleartimeout (D.callbackid)), e=a.style,f= c.restore,e&& (E.backgroundimage=f.backgroundimage,e.position=f.position,e.zindex=f.zindex), A.removechild (C.wrapper)), A.bgsexpando=null}catch (g){}a=b=i=l=null}o={Init:"Print"!==i.media?s:l,handlepropertychange:l,restore:l,handleresize:l}, "complete" ===a.readystate&&o.init ()} (Element,window); </script><script type= "Text/vbscript" ></script></PUBLIC:COMPONENT>
CSS background-size HTC is not valid in several cases