兼容IE6的图片圆角边框CSS_CSS教程_CSS_网页制作

实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.
核心CSS代码:

复制代码

代码如下:

.i_roundimg{ background:url(https://www.jb51.net/do/uploads/userup/1007/04191G15618.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}

DEMO用到的PNG背景图片:

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>兼容IE6的图片圆角边框@Mr.Think</title> <style> body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} h2{font-size:1.2em; color:#a40000; text-align:center; line-height:2em} .box{width:600px; margin:2em auto} .box li{display:inline; margin:1em} .box li img{width:60px; height:60px;border:0;} .box li .i_roundimg{ background:url(https://www.jb51.net/do/uploads/userup/1007/04191G15618.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;} /*如果只有一处用到PNG背景可以用以下代码 .box li .i_roundimg{ background:url(https://www.jb51.net/do/uploads/userup/1007/04191G15618.png) no-repeat;_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.jb51.net/do/uploads/userup/1007/04191G15618.png',sizingMethod='scale');cursor:pointer;width:60px;height:60px;position:absolute;} */ </style> </head> <body> <h1><a href="http://mrthink.net/">Mr.Think的个人博客</a>@专注前端技术,热爱PHP,崇尚简单生活.</h1> <h2>兼容IE6的图片圆角边框@Mr.Think,支持可恨可恶的万万人诅咒的IE6哦~</h2> <ol class="box"> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="https://www.jb51.net/images/logo.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="https://www.jb51.net/images/logo.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="https://www.jb51.net/images/logo.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="https://www.jb51.net/images/logo.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="https://www.jb51.net/images/logo.gif" width="60" height="60"></a></li> </ol>   </body> </html>

提示：您可以先修改部分代码再运行

另外附上两种解决IE6下PNG图片的方案:
JavaScript让IE6识别PNG(适应性强,适应于背景PNG和页面中的PNG):

复制代码

代码如下:

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 E={J:\'E\',Z:{},1E:7(){4(x.1l&&!x.1l[6.J]){x.1l.23(6.J,\'24:25-26-27:3\')}4(1F.11){1F.11(\'28\',7(){E=29})}},1G:7(){2 a=x.1m(\'8\');x.1H.1b.1n(a,x.1H.1b.1b);2 b=a.1o;b.1c(6.J+\'\\\\:*\',\'{12:2a(#1I#2b)}\');b.1c(6.J+\'\\\\:9\',\'Q:1p;\');b.1c(\'1J.\'+6.J+\'1K\',\'12:y; 1q:y; Q:1p; z-2c:-1; 1d:-1r; 1L:1M;\');6.1o=b},1N:7(){2 a=13.2d;4(13.1e.K(\'2e\')!=-1||13.1e.K(\'1q\')!=-1){E.1f(a)}4(13.1e==\'8.1s\'){2 b=(a.F.1s==\'y\')?\'y\':\'2f\';G(2 v M a.3){a.3[v].9.8.1s=b}}4(13.1e.K(\'14\')!=-1){E.1t(a)}},1t:7(a){4(a.F.14.K(\'2g\')!=-1){2 b=a.F.14;b=1u(b.2h(b.1v(\'=\')+1,b.1v(\')\')),10)/2i;a.3.N.9.8.14=a.F.14;a.3.C.I.2j=b}},15:7(a){2k(7(){E.1f(a)},1)},2l:7(a){2 b=a.1O(\',\');G(2 i=0;ig.H){c.B=g.H}e.3.C.9.8.1Z=\'20(\'+c.T+\'u \'+(c.R+i)+\'u \'+c.B+\'u \'+(c.L+i)+\'u)\'}U{e.3.C.9.8.1Z=\'20(\'+p.T+\'u \'+p.R+\'u \'+p.B+\'u \'+p.L+\'u)\'}},1P:7(a){a.8.12=\'y\';4(a.17==\'32\'||a.17==\'33\'||a.17==\'34\'){1g}a.O=V;4(a.17==\'35\'){4(a.1h.21().K(/\\.22$/)!=-1){a.O=P;a.8.1L=\'1M\'}U{1g}}U 4(a.F.19.21().K(\'.22\')==-1){1g}2 b=E;a.3={N:{},C:{}};2 c={9:{},I:{}};G(2 r M a.3){G(2 e M c){2 d=b.J+\':\'+e;a.3[r][e]=x.1m(d)}a.3[r].9.36=V;a.3[r].9.37(a.3[r].I);a.38.1n(a.3[r].9,a)}a.3.C.9.39=\'y\';a.3.C.I.3a=\'3b\';a.3.N.I.1w=V;b.1T(a);b.1x(a);b.1x(a.3c);b.1f(a)}};3d{x.3e("3f",V,P)}3g(r){}E.1E();E.1G();',62,203,'||var|vml|if||this|function|style|shape|||||||||||||||||||||px|||document|none||||image|vmlBg|EvPNG|currentStyle|for||fill|ns|search||in|color|isImg|true|position||runtimeStyle||else|false||||imgSize||attachEvent|behavior|event|filter|handlePseudoHover|vmlOffsets|nodeName|backgroundColor|backgroundImage|case|firstChild|addRule|top|propertyName|applyVML|return|src|width|height|bLW|namespaces|createElement|insertBefore|styleSheet|absolute|border|10000px|display|vmlOpacity|parseInt|lastIndexOf|on|giveLayout|left|bTW|break|b1|b2|repeat|createVmlNameSpace|window|createVmlStyleSheet|documentElement|default|img|_sizeFinder|visibility|hidden|readPropertyChange|split|fixPng|cssText|vmlFill|copyImageBorders|attachHandlers|zIndex|transparent|removeAttribute|body|0l|clip|rect|toLowerCase|png|add|urn|schemas|microsoft|com|onbeforeunload|null|url|VML|index|srcElement|background|block|lpha|substring|100|opacity|setTimeout|fix|length|expression|resize|move|mouseleave|mouseenter|focus|blur|onpropertychange|zoom|static|relative|borderStyle|borderWidth|borderColor|substr|className|onload|offsetWidth|offsetHeight|clientWidth|clientHeight|offsetLeft|offsetTop|clientLeft|clientTop|coordsize|coordorigin|path|m0|l0|xe|switch|center|right|bottom|01|Math|ceil|backgroundPosition|backgroundRepeat|toUpperCase|BODY|TD|TR|IMG|stroked|appendChild|parentNode|fillcolor|type|tile|offsetParent|try|execCommand|BackgroundImageCache|catch'.split('|'),0,{}))
EvPNG.fix('div,span'); //EvPNG.fix('@Mr.Think提示你:请在此处设置包含透明PNG图片的标签'),多个标签之间用英文逗号隔开.

IE滤镜让IE6实现PNG效果(适应性差,一般用于仅一两处用到PNG背景的情况):

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/do/uploads/allimg/100704/1923432.png',sizingMethod='scale');