IE6 is compatible with transparent background images and ie6 background images

IE6 is compatible with transparent background images and ie6 background images

:

 

HTML:

 

<! -- [If IE 6]> <script src = "~ /Scripts/UI/DD_belatedPNG.js "> </script> <script >$ (function () {// 1. Use the common class DD_belatedPNG.fix (" .pngFix,.png Fix: hover "); // 2. directly use the selector: Class Name, ID, and label DD_belatedPNG.fix (". imgpng, img ") ;}); </script> <! [Endif] -->

 

 

<Div class = "contain"> 
 
 
CSS:
<style>.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }.contain .con { width: 400px; float: left; }.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }.contain h2 { font-size: 16px; color: #333; }.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }</style>
 
DD_belatedPNG.js:
Var DD_belatedPNG = {ns: "DD_belatedPNG", imgSize :{}, delay: 10, nodesFixed: 0, createVmlNameSpace: function () {if (document. namespaces &&! Document. namespaces [this. ns]) {document. namespaces. add (this. ns, "urn: schemas-microsoft-com: vml") }}, createVmlStyleSheet: function () {var B, a; B = document. createElement ("style"); B. setAttribute ("media", "screen" contains multiple document.documentelement.firstchild.insertbefore( B, document.doc umentElement. firstChild. firstChild); if (B. styleSheet) {B = B. styleSheet; B. addRule (this. ns + "\: *", "{behavior: url (# default # VML)}"); B. addRule (This. ns + "\: shape", "position: absolute;"); B. addRule ("img. "+ this. ns + "_ sizeFinder", "behavior: none; border: none; position: absolute; z-index:-1; top:-pixel PX; visibility: hidden ;"); this. screenStyleSheet = B; a = document. createElement ("style");. setAttribute ("media", "print" registry.document.documentelement.firstchild.insertbefore(a, document.doc umentElement. firstChild. firstChild); a =. styleSheet;. addRule (this. ns + "\\: * "," {Display: none! Important;} "); a. addRule (" img. "+ this. ns +" _ sizeFinder "," {display: none! Important;} ") }}, readPropertyChange: function () {var B, c, a; B = event. srcElement; if (! B. vmlInitiated) {return} if (event. propertyName. search ("background ")! =-1 | event. propertyName. search ("border ")! =-1) {DD_belatedPNG.applyVML (B)} if (event. propertyName = "style. display") {c = (B. currentStyle. display = "none ")? "None": "block"; for (a in B. vml) {if (B. vml. hasOwnProperty (a) {B. vml [a]. shape. style. display = c }}if (event. propertyName. search ("filter ")! =-1) {DD_belatedPNG.vmlOpacity (B) }}, vmlOpacity: function (B) {if (B. currentStyle. filter. search ("lpha ")! =-1) {var a = B. currentStyle. filter; a = parseInt (. substring (. lastIndexOf ("=") + 1,. lastIndexOf (")"), 10)/100; B. vml. color. shape. style. filter = B. currentStyle. filter; B. vml. image. fill. opacity = a }}, handlepseudo dohover: function (a) {setTimeout (function () {DD_belatedPNG.applyVML (a)}, 1)}, fix: function (a) {if (this. screenStyleSheet) {var c, B; c =. split (","); for (B = 0; B <c. length; B ++) {this. screenStyleSheet. addRule (c [B], "behavi Or: expression (DD_belatedPNG.fixPng (this) ") }}, applyVML: function(a){a.runtimeStyle.css Text =" "; this. vmlFill (a); this. vmlOffsets (a); this. vmlOpacity (a); if (. isImg) {this. copyImageBorders (a) }}, attachHandlers: function (I) {var d, c, g, e, B, f; d = this; c = {resize: "vmlOffsets ", move: "vmlOffsets"}; if (I. nodeName = "A") {e = {mouseleave: "handlepseudo hover", mouseenter: "handlepseudo dohover", focus: "handlepseudo dohover", blur: "hand Lepseudo hover "}; for (B in e) {if (e. hasOwnProperty (B) {c [B] = e [B] }}for (f in c) {if (c. hasOwnProperty (f) {g = function () {d [c [f] (I)}; I. attachEvent ("on" + f, g)} I. attachEvent ("onpropertychange", this. readPropertyChange)}, giveLayout: function (a) {. style. zoom = 1; if (. currentStyle. position = "static") {. style. position = "relative" }}, copyImageBorders: function (B) {var c, a; c = {borderStyle: true, borderWidth: true, borderColor: True}; for (a in c) {if (c. hasOwnProperty (a) {B. vml. color. shape. style [a] = B. currentStyle [a] }}, vmlFill: function (e) {if (! E. currentStyle) {return} else {var d, f, g, B, a, c; d = e. currentStyle} for (B in e. vml) {if (e. vml. hasOwnProperty (B) {e. vml [B]. shape. style. zIndex = d. zIndex} e. runtimeStyle. backgroundColor = ""; e. runtimeStyle. backgroundImage = ""; f = true; if (d. backgroundImage! = "None" | e. isImg) {if (! E. isImg) {e. vmlBg = d. backgroundImage; e. vmlBg = e. vmlBg. substr (5, e. vmlBg. lastIndexOf ('")')-5)} else {e. vmlBg = e. src} g = this; if (! G. imgSize [e. vmlBg]) {a = document. createElement ("img"); g. imgSize [e. vmlBg] = a;. className = g. ns + "_ sizeFinder" paia.runtimestyle.css Text = "behavior: none; position: absolute; left:-pixel PX; top:-pixel PX; border: none; margin: 0; padding: 0; "; c = function () {this. width = this. offsetWidth; this. height = this. offsetHeight; g. vmlOffsets (e)};. attachEvent ("onload", c);. src = e. vmlBg;. removeAttribute ("width");. removeAttribute ("h Eight "); document. body. insertBefore (a, document. body. firstChild)} e. vml. image. fill. src = e. vmlBg; f = false} e. vml. image. fill. on =! F; e. vml. image. fill. color = "none"; e. vml. color. shape. style. backgroundColor = d. backgroundColor; e. runtimeStyle. backgroundImage = "none"; e. runtimeStyle. backgroundColor = "transparent"}, vmlOffsets: function (d) {var h, n, a, e, g, m, f, l, j, I, k; h = d. currentStyle; n = {W: d. clientWidth + 1, H: d. clientHeight + 1, w: this. imgSize [d. vmlBg]. width, h: this. imgSize [d. vmlBg]. height, L: d. offsetLeft, T: d. offsetTop, bLW: d. clientLeft, bTW: d. clientTo P}; a = (n. L + n. bLW = 1 )? 1:0; e = function (B, p, q, c, s, u) {B. coordsize = c + "," + s; B. coordorigin = u + "," + u; B. path = "m0, 0l" + c + ", 0l" + c + "," + s + "l0," + s + "xe"; B. style. width = c + "px"; B. style. height = s + "px"; B. style. left = p + "px"; B. style. top = q + "px"}; e (d. vml. color. shape, (n. L + (d. isImg? 0: n. bLW), (n. T + (d. isImg? 0: n. bTW), (n. w-1), (n. h-1), 0); e (d. vml. image. shape, (n. L + n. bLW), (n. T + n. bTW), (n. w), (n. h), 1); g = {X: 0, Y: 0}; if (d. isImg) {g. X = parseInt (h. paddingLeft, 10) + 1; g. Y = parseInt (h. paddingTop, 10) + 1} else {for (j in g) {if (g. hasOwnProperty (j) {this. figurePercentage (g, n, j, h ["backgroundPosition" + j]) }}} d. vml. image. fill. position = (g. x/n. w) + "," + (g. y/n. h); m = h. backgroundRepeat; f = {T: 1, R: n. W + a, B: n. h, L: 1 + a}; l = {X: {b1: "L", b2: "R", d: "W "}, Y: {b1: "T", b2: "B", d: "H" }}; if (m! = "Repeat" | d. isImg) {I = {T :( g. y), R :( g. X + n. w), B :( g. Y + n. h), L :( g. x)}; if (m. search ("repeat -")! =-1) {k = m. split ("repeat-") [1]. toUpperCase (); I [l [k]. b1] = 1; I [l [k]. b2] = n [l [k]. d]} if (I. b> n. h) {I. B = n. h} d. vml. image. shape. style. clip = "rect (" + I. T + "px" + (I. R + a) + "px" + I. B + "px" + (I. L + a) + "px)"} else {d. vml. image. shape. style. clip = "rect (" + f. T + "px" + f. R + "px" + f. B + "px" + f. L + "px)" }}, figurePercentage: function (d, c, f, a) {var B, e; e = true; B = (f = "X"); switch (a) {case "left": case "top": d [f] = 0; break; case "center ": d [f] = 0.5; break; ca Se "right": case "bottom": d [f] = 1; break; default: if (a. search ("% ")! =-1) {d [f] = parseInt (a, 10)/100} else {e = false} d [f] = Math. ceil (e? (C [B? "W": "H"] * d [f])-(c [B? "W": "h"] * d [f]): parseInt (a, 10); if (d [f] % 2 = 0) {d [f] ++} return d [f]}, fixPng: function (c) {c. style. behavior = "none"; var g, B, f, a, d; if (c. nodeName = "BODY" | c. nodeName = "TD" | c. nodeName = "TR") {return} c. isImg = false; if (c. nodeName = "IMG") {if (c. src. toLowerCase (). search (/\. png $ /)! =-1) {c. isImg = true; c. style. visibility = "hidden"} else {return} else {if (c. currentStyle. backgroundImage. toLowerCase (). search (". png ") =-1) {return} g = DD_belatedPNG; c. vml = {color :{}, image :{}}; B = {shape :{}, fill :{}}; for (a in c. vml) {if (c. vml. hasOwnProperty (a) {for (d in B) {if (B. hasOwnProperty (d) {f = g. ns + ":" + d; c. vml [a] [d] = document. createElement (f)} c. vml [a]. shape. stroked = false; c. vml [a]. shape. appendChild (c. vml [a]. fill); c. parentNode. insertBefore (c. vml [a]. shape, c)} c. vml. image. shape. fillcolor = "none"; c. vml. image. fill. type = "tile" javasccommand ("BackgroundImageCache", false, true)} catch (r) {} DD_belatedPNG.createVmlNameSpace (); DD_belatedPNG.createVmlStyleSheet ();View Code