Link IE6 Bug after using filter

The background of a DIV is a PNG picture, using the filter to make it transparent under IE6, but the hover effect of the a tag below it cannot be displayed and the link cannot be clicked.
The usual solution is to add a relative position to a label (position:relative;), but here I have an absolute position on a label (Position:absolute;), so how do I solve it?

There are two ways:
1, in the use of filters outside the container plus a container, the container plus absolute positioning. A label with the relative positioning of the attribute (position:relative) can be clicked.

2, use IE6 under the PNG image Transparent plug-in dd_belatedpng, the usage is very simple, and jquery syntax similar:
The first is to refer to this JS PNG image transparent plugin dd_belatedpng code, saved into a dd_belatedpng.js file

The code is as follows

Copy Code

<script type= "Text/javascript" > var dd_belatedpng={ns: "Dd_belatedpng", Imgsize:{},delay:10,nodesfixed:0,createvmlnamespace:function () {if ( DOCUMENT.NAMESPACES&AMP;&AMP;!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");d Ocument.documentElement.firstChild.insertBefore (b, Document.documentElement.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:-10000px; Visibility:hidden; "); This.screenstylesheet=b;a=document.createelement ("style"); A.setattribute ("Media", "print"); Document.documentElement.firstChild.insertBefore (a,document.documentelement.firstchild.firstchild); a= A.stylesheet;a.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 (a.substring ("=") +1,a.lastindexof (")")/100;b.vml.color.shape.style.filter=b.currentstyle.filter;b.vml.image.fill.opacity=a }},handlepseudohover:function (a) {settimeout (function () {DD_BELATEDPNG.APPLYVML (a)},1)},fix:function (a) {if ( This.screenstylesheet) {var c,b;c=a.split (","); for (b=0;b<c.length;b++) {this.screenStyleSheet.addRule (c[b], " Behavior:expression (Dd_belatedpng.fixpng (this))}}},APPLYvml:function (a) {a.runtimestyle.csstext= ""; This.vmlfill (a); This.vmloffsets (a); this.vmlopacity (a); if (A.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:" Handlepseudohover ", MouseEnter:" Handlepseudohover ", Focus:" Handlepseudohover ", Blur:" Handlepseudohover "};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) {a.style.zoom=1;if (a.currentstyle.position== "static") { a.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;a.classname= g.ns+ "_sizefinder"; a.runtimestyle.csstext= "Behavior:none; Position:absolute; left:-10000px; top:-10000px; Border:none; margin:0; padding:0; "; C=function () {this.width=this.offsetwidth;this.height=this.offsetheight;g.vmloffsets (E)};a.attachEvent ("onload" , c); A.src=e.vmlbg;a.removeattribute ("width"); A.removeattribute ("height");d ocument.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.clienttop};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;case ' 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])):p Arseint (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"; c.vml.color.fill.on=false; G.attachhandlers (c); G.givelayout (c); G.givelayout (c.offsetparent); c.vmlinitiated=true;g.applyvml (c)}};try{ Document.execcommand ("Backgroundimagecache", False,true)}catch (r) {}dd_belatedpng.createvmlnamespace ();DD _ Belatedpng.createvmlstylesheet (); </script>

Then refer to it to find the class or ID name (which can be followed by multiple class or ID names) for the label that needs to be transparent, such as:

The code is as follows	Copy Code
<script type= "Text/javascript" > Dd_belatedpng.fix ('. Trunleft,.jicon,.per_li li,.navf a,.per_info. Add,. per_info. Intr '); </script>

The reason for this bug may be that DXImageTransform.Microsoft.AlphaImageLoader changes the level of the container, and its positioning attributes change the level of the element.