兼容IE6的图片圆角边框CSS

ttx9n · 发表于 2010-7-4 19:13:58

纯CSS实现的图片圆角边框效果,兼容IE6. 实现原理很简单,利用绝对定位,使一个背景为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> 
 
<!--[if IE 6]> 
<script> 
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?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;i<b.2m;i++){6.1o.1c(b[i],\'12:2n(E.1P(6))\')}},1f:7(a){a.S.1Q=\'\';6.1R(a);6.16(a);6.1t(a);4(a.O){6.1S(a)}},1T:7(b){2 c=6;2 d={2o:\'16\',2p:\'16\'};4(b.17==\'A\'){2 e={2q:\'15\',2r:\'15\',2s:\'15\',2t:\'15\'};G(2 a M e){d[a]=e[a]}}G(2 h M d){b.11(\'1w\'+h,7(){c[d[h]](b)})}b.11(\'2u\',6.1N)},1x:7(a){a.8.2v=1;4(a.F.Q==\'2w\'){a.8.Q=\'2x\'}},1S:7(a){2 b={\'2y\':P,\'2z\':P,\'2A\':P};G(2 s M b){a.3.N.9.8[s]=a.F[s]}},1R:7(a){4(!a.F){1g}U{2 b=a.F}G(2 v M a.3){a.3[v].9.8.1U=b.1U}a.S.18=\'\';a.S.19=\'\';2 c=(b.18==\'1V\');2 d=P;4(b.19!=\'y\'||a.O){4(!a.O){a.D=b.19;a.D=a.D.2B(5,a.D.1v(\'")\')-5)}U{a.D=a.1h}2 e=6;4(!e.Z[a.D]){2 f=x.1m(\'1J\');e.Z[a.D]=f;f.2C=e.J+\'1K\';f.S.1Q=\'12:y; Q:1p; 1y:-1r; 1d:-1r; 1q:y;\';f.11(\'2D\',7(){6.1i=6.2E;6.1j=6.2F;e.16(a)});f.1h=a.D;f.1W(\'1i\');f.1W(\'1j\');x.1X.1n(f,x.1X.1b)}a.3.C.I.1h=a.D;d=V}a.3.C.I.1w=!d;a.3.C.I.N=\'y\';a.3.N.9.8.18=b.18;a.S.19=\'y\';a.S.18=\'1V\'},16:7(e){2 f=e.F;2 g={\'W\':e.2G+1,\'H\':e.2H+1,\'w\':6.Z[e.D].1i,\'h\':6.Z[e.D].1j,\'L\':e.2I,\'T\':e.2J,\'1k\':e.2K,\'1z\':e.2L};2 i=(g.L+g.1k==1)?1:0;2 j=7(a,l,t,w,h,o){a.2M=w+\',\'+h;a.2N=o+\',\'+o;a.2O=\'2P,1Y\'+w+\',1Y\'+w+\',\'+h+\'2Q,\'+h+\' 2R\';a.8.1i=w+\'u\';a.8.1j=h+\'u\';a.8.1y=l+\'u\';a.8.1d=t+\'u\'};j(e.3.N.9,(g.L+(e.O?0:g.1k)),(g.T+(e.O?0:g.1z)),(g.W-1),(g.H-1),0);j(e.3.C.9,(g.L+g.1k),(g.T+g.1z),(g.W),(g.H),1);2 k={\'X\':0,\'Y\':0};2 m=7(a,b){2 c=P;2S(b){1a\'1y\':1a\'1d\':k[a]=0;1A;1a\'2T\':k[a]=.5;1A;1a\'2U\':1a\'2V\':k[a]=1;1A;1I:4(b.K(\'%\')!=-1){k[a]=1u(b)*.2W}U{c=V}}2 d=(a==\'X\');k[a]=2X.2Y(c?((g[d?\'W\':\'H\']*k[a])-(g[d?\'w\':\'h\']*k[a])):1u(b));4(k[a]==0){k[a]++}};G(2 b M k){m(b,f[\'2Z\'+b])}e.3.C.I.Q=(k.X/g.W)+\',\'+(k.Y/g.H);2 n=f.30;2 p={\'T\':1,\'R\':g.W+i,\'B\':g.H,\'L\':1+i};2 q={\'X\':{\'1B\':\'L\',\'1C\':\'R\',\'d\':\'W\'},\'Y\':{\'1B\':\'T\',\'1C\':\'B\',\'d\':\'H\'}};4(n!=\'1D\'){2 c={\'T\':(k.Y),\'R\':(k.X+g.w),\'B\':(k.Y+g.h),\'L\':(k.X)};4(n.K(\'1D-\')!=-1){2 v=n.1O(\'1D-\')[1].31();c[q[v].1B]=1;c[q[v].1C]=g[q[v].d]}4(c.B>g.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</td></tr></table>

</div>
<div id="comment_66247" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
<div class="mtw mbw">
<h3 class="pbm mbm bbda">相关帖子</h3>
<ul class="xl xl2 cl"><li>• <a href="thread-49764-1-1.html" title="IE6不能修改NAME问题的解决方法" target="_blank">IE6不能修改NAME问题的解决方法</a></li>
<li>• <a href="thread-49860-1-1.html" title="IE6下js通过css隐藏select的一个bug" target="_blank">IE6下js通过css隐藏select的一个bug</a></li>
<li>• <a href="thread-50154-1-1.html" title="让IE6支持min-width和max-width的方法" target="_blank">让IE6支持min-width和max-width的方法</a></li>
<li>• <a href="thread-53692-1-1.html" title="CSS也可以把IE6弄死" target="_blank">CSS也可以把IE6弄死</a></li>
<li>• <a href="thread-81317-1-1.html" title="ie6 注释引起的问题" target="_blank">ie6 注释引起的问题</a></li>
<li>• <a href="thread-81395-1-1.html" title="css ie6 ie7 ff的CSS hack使用技巧" target="_blank">css ie6 ie7 ff的CSS hack使用技巧</a></li>
<li>• <a href="thread-81475-1-1.html" title="IE6网页神奇BUG" target="_blank">IE6网页神奇BUG</a></li>
<li>• <a href="thread-81516-1-1.html" title="区分IE6，IE7，firefox的CSS hack" target="_blank">区分IE6，IE7，firefox的CSS hack</a></li>
<li>• <a href="thread-81540-1-1.html" title="特牛的FF/IE6/IE7专用CSS HACK" target="_blank">特牛的FF/IE6/IE7专用CSS HACK</a></li>
<li>• <a href="thread-81607-1-1.html" title="多浏览器下IE6 IE7 firefox li 间距问题第1/2页" target="_blank">多浏览器下IE6 IE7 firefox li 间距问题第1/2页</a></li>
</ul>
</div>
</td>
</tr>
<tr id="_postposition66247"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=56&tid=9865&reppost=66247&extra=page%3D1&page=1" onclick="showWindow('reply', this.href)">回复</a>
<div class="y" style="line-height:14px;margin-top:6px;position:relative;"><div id="bdshare" class="bdshare_b" style="line-height: 12px;"><img src="http://share.baidu.com/static/images/type-button-1.jpg" /></div>
    <script type="text/javascript" id="bdshare_js" data="type=button&uid=250039" ></script>
    <script type="text/javascript" id="bdshell_js"></script>
    <script type="text/javascript">
        document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();
    </script></div></em>

<ul id="mgc_post_66247_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_66247')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_66248" ><table id="pid66248" class="plhin" summary="pid66248" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar66248" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1956.html" target="_blank" class="xw1">回复用户5</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo66248" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo66248_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1956.html" target="_blank" class="xi2">回复用户5</a></strong>
<em>当前在线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1956&do=profile" target="_blank" class="xi2">186</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1956&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo66248')"><a href="space-uid-1956.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1956&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1956&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1956&do=thread&type=reply&view=me&from=space" class="xi2"><span title="24874">2万</span></a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1956&do=profile" class="xi2">186</a></p>积分</td></table></div>

<p><span id="g_up66248" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 2" /></span></p>
<div id="g_up66248_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">注册会员, 积分 186, 距离下一级还需 14 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_66248" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up66248_menu'});"><span class="pbr2" style="width:90%;"></span></span></p>
<div id="g_up66248_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">注册会员, 积分 186, 距离下一级还需 14 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1956&touid=1956&pmid=0&daterange=2&pid=66248&tid=9865" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon66248" src="static/image/common/online_member.gif" />
<em id="authorposton66248">发表于 2010-7-4 19:19:48</em>
<span class="pipe">|</span>
<a href="thread-9865-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_66248">
px</td></tr></table>

</div>
<div id="comment_66248" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition66248"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=56&tid=9865&repquote=66248&extra=page%3D1&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=9865&pid=66248&hash=e5e97685"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_66248').innerHTML ? $('review_support_66248').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_66248"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=9865&pid=66248&hash=e5e97685"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_66248').innerHTML ? $('review_against_66248').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_66248"></span></a>
</em>

<ul id="mgc_post_66248_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_66248')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_66249" ><table id="pid66249" class="plhin" summary="pid66249" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar66249" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1957.html" target="_blank" class="xw1">回复用户6</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo66249" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo66249_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1957.html" target="_blank" class="xi2">回复用户6</a></strong>
<em>当前离线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1957&do=profile" target="_blank" class="xi2">257</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1957&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo66249')"><a href="space-uid-1957.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1957&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1957&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1957&do=thread&type=reply&view=me&from=space" class="xi2">65</a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1957&do=profile" class="xi2">257</a></p>积分</td></table></div>

<p><span id="g_up66249" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 3" /><img src="static/image/common/star_level1.gif" alt="Rank: 3" /></span></p>
<div id="g_up66249_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 257, 距离下一级还需 243 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_66249" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up66249_menu'});"><span class="pbr2" style="width:19%;"></span></span></p>
<div id="g_up66249_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 257, 距离下一级还需 243 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1957&touid=1957&pmid=0&daterange=2&pid=66249&tid=9865" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon66249" src="static/image/common/online_member.gif" />
<em id="authorposton66249">发表于 2010-7-4 19:20:21</em>
<span class="pipe">|</span>
<a href="thread-9865-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_66249">
document|none</td></tr></table>

</div>
<div id="comment_66249" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition66249"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=56&tid=9865&repquote=66249&extra=page%3D1&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=9865&pid=66249&hash=e5e97685"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_66249').innerHTML ? $('review_support_66249').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_66249"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=9865&pid=66249&hash=e5e97685"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_66249').innerHTML ? $('review_against_66249').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_66249"></span></a>
</em>

<ul id="mgc_post_66249_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_66249')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_66250" ><table id="pid66250" class="plhin" summary="pid66250" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar66250" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1955.html" target="_blank" class="xw1">回复用户3</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo66250" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo66250_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1955.html" target="_blank" class="xi2">回复用户3</a></strong>
<em>当前离线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1955&do=profile" target="_blank" class="xi2">220</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1955&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo66250')"><a href="space-uid-1955.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1955&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1955&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1955&do=thread&type=reply&view=me&from=space" class="xi2">55</a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1955&do=profile" class="xi2">220</a></p>积分</td></table></div>

<p><span id="g_up66250" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 3" /><img src="static/image/common/star_level1.gif" alt="Rank: 3" /></span></p>
<div id="g_up66250_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 220, 距离下一级还需 280 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_66250" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up66250_menu'});"><span class="pbr2" style="width:6%;"></span></span></p>
<div id="g_up66250_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 220, 距离下一级还需 280 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1955&touid=1955&pmid=0&daterange=2&pid=66250&tid=9865" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon66250" src="static/image/common/online_member.gif" />
<em id="authorposton66250">发表于 2010-7-4 19:21:09</em>
<span class="pipe">|</span>
<a href="thread-9865-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_66250">
|image|vmlBg|EvPNG|currentStyle|for||fill|ns|search||in|color|isImg|true|position||runtimeStyle||else|false</td></tr></table>

</div>
<div id="comment_66250" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition66250"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=56&tid=9865&repquote=66250&extra=page%3D1&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=9865&pid=66250&hash=e5e97685"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_66250').innerHTML ? $('review_support_66250').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_66250"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=9865&pid=66250&hash=e5e97685"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_66250').innerHTML ? $('review_against_66250').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_66250"></span></a>
</em>

<ul id="mgc_post_66250_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_66250')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_66251" ><table id="pid66251" class="plhin" summary="pid66251" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar66251" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1956.html" target="_blank" class="xw1">回复用户5</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo66251" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo66251_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1956.html" target="_blank" class="xi2">回复用户5</a></strong>
<em>当前在线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1956&do=profile" target="_blank" class="xi2">186</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1956&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo66251')"><a href="space-uid-1956.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1956&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1956&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1956&do=thread&type=reply&view=me&from=space" class="xi2"><span title="24874">2万</span></a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1956&do=profile" class="xi2">186</a></p>积分</td></table></div>

<p><span id="g_up66251" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 2" /></span></p>
<div id="g_up66251_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">注册会员, 积分 186, 距离下一级还需 14 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_66251" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up66251_menu'});"><span class="pbr2" style="width:90%;"></span></span></p>
<div id="g_up66251_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">注册会员, 积分 186, 距离下一级还需 14 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1956&touid=1956&pmid=0&daterange=2&pid=66251&tid=9865" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon66251" src="static/image/common/online_member.gif" />
<em id="authorposton66251">发表于 2010-7-4 19:21:57</em>
<span class="pipe">|</span>
<a href="thread-9865-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_66251">
|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图片的标签'),多个标签之间用英文逗号隔开. 
</script> 
<![endif]--> 
</body> 
</html>

提示：您可以先修改部分代码再运行
另外附上两种解决IE6下PNG图片的方案:
JavaScript让IE6识别PNG(适应性强,适应于背景PNG和页面中的PNG):

复制代码代码如下:
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?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;i<b.2m;i++){6.1o.1c(b[i],\'12:2n(E.1P(6))\')}},1f:7(a){a.S.1Q=\'\';6.1R(a);6.16(a);6.1t(a);4(a.O){6.1S(a)}},1T:7(b){2 c=6;2 d={2o:\'16\',2p:\'16\'};4(b.17==\'A\'){2 e={2q:\'15\',2r:\'15\',2s:\'15\',2t:\'15\'};G(2 a M e){d[a]=e[a]}}G(2 h M d){b.11(\'1w\'+h,7(){c[d[h]](b)})}b.11(\'2u\',6.1N)},1x:7(a){a.8.2v=1;4(a.F.Q==\'2w\'){a.8.Q=\'2x\'}},1S:7(a){2 b={\'2y\':P,\'2z\':P,\'2A\':P};G(2 s M b){a.3.N.9.8[s]=a.F[s]}},1R:7(a){4(!a.F){1g}U{2 b=a.F}G(2 v M a.3){a.3[v].9.8.1U=b.1U}a.S.18=\'\';a.S.19=\'\';2 c=(b.18==\'1V\');2 d=P;4(b.19!=\'y\'||a.O){4(!a.O){a.D=b.19;a.D=a.D.2B(5,a.D.1v(\'")\')-5)}U{a.D=a.1h}2 e=6;4(!e.Z[a.D]){2 f=x.1m(\'1J\');e.Z[a.D]=f;f.2C=e.J+\'1K\';f.S.1Q=\'12:y; Q:1p; 1y:-1r; 1d:-1r; 1q:y;\';f.11(\'2D\',7(){6.1i=6.2E;6.1j=6.2F;e.16(a)});f.1h=a.D;f.1W(\'1i\');f.1W(\'1j\');x.1X.1n(f,x.1X.1b)}a.3.C.I.1h=a.D;d=V}a.3.C.I.1w=!d;a.3.C.I.N=\'y\';a.3.N.9.8.18=b.18;a.S.19=\'y\';a.S.18=\'1V\'},16:7(e){2 f=e.F;2 g={\'W\':e.2G+1,\'H\':e.2H+1,\'w\':6.Z[e.D].1i,\'h\':6.Z[e.D].1j,\'L\':e.2I,\'T\':e.2J,\'1k\':e.2K,\'1z\':e.2L};2 i=(g.L+g.1k==1)?1:0;2 j=7(a,l,t,w,h,o){a.2M=w+\',\'+h;a.2N=o+\',\'+o;a.2O=\'2P,1Y\'+w+\',1Y\'+w+\',\'+h+\'2Q,\'+h+\' 2R\';a.8.1i=w+\'u\';a.8.1j=h+\'u\';a.8.1y=l+\'u\';a.8.1d=t+\'u\'};j(e.3.N.9,(g.L+(e.O?0:g.1k)),(g.T+(e.O?0:g.1z)),(g.W-1),(g.H-1),0);j(e.3.C.9,(g.L+g.1k),(g.T+g.1z),(g.W),(g.H),1);2 k={\'X\':0,\'Y\':0};2 m=7(a,b){2 c=P;2S(b){1a\'1y\':1a\'1d\':k[a]=0;1A;1a\'2T\':k[a]=.5;1A;1a\'2U\':1a\'2V\':k[a]=1;1A;1I:4(b.K(\'%\')!=-1){k[a]=1u(b)*.2W}U{c=V}}2 d=(a==\'X\');k[a]=2X.2Y(c?((g[d?\'W\':\'H\']*k[a])-(g[d?\'w\':\'h\']*k[a])):1u(b));4(k[a]==0){k[a]++}};G(2 b M k){m(b,f[\'2Z\'+b])}e.3.C.I.Q=(k.X/g.W)+\',\'+(k.Y/g.H);2 n=f.30;2 p={\'T\':1,\'R\':g.W+i,\'B\':g.H,\'L\':1+i};2 q={\'X\':{\'1B\':\'L\',\'1C\':\'R\',\'d\':\'W\'},\'Y\':{\'1B\':\'T\',\'1C\':\'B\',\'d\':\'H\'}};4(n!=\'1D\'){2 c={\'T\':(k.Y),\'R\':(k.X+g.w),\'B\':(k.Y+g.h),\'L\':(k.X)};4(n.K(\'1D-\')!=-1){2 v=n.1O(\'1D-\')[1].31();c[q[v].1B]=1;c[q[v].1C]=g[q[v].d]}4(c.B>g.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

回复用户4 · 发表于 2010-7-4 19:27:04

回复用户3 · 发表于 2010-7-4 19:27:41

document|none

回复用户2 · 发表于 2010-7-4 19:28:35

|image|vmlBg|EvPNG|currentStyle|for||fill|ns|search||in|color|isImg|true|position||runtimeStyle||else|false

回复用户5 · 发表于 2010-7-4 19:29:32

|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');

adm1n · 发表于 2022-9-23 21:38:12

不错的源码论坛

账号		自动登录	找回密码
密码			立即注册

[CSS] 兼容IE6的图片圆角边框CSS