用css实现兼容IE6的图片圆角边框方法

<style>
#demo h2,#demo h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative}
#demo h3{color:#888; font-weight:bold}
#demo .box{width:600px; margin:2em auto}
#demo .box li{display:inline; margin:1em; float:left}
#demo .box li img{width:60px; height:60px;border:0;}
#demo .box li .i_roundimg{ background:url(/demo/images/100508.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}
/*如果只有一处用到png背景可以用以下代码
.box li .i_roundimg{ background:url(/demo/images/100508.png) no-repeat;_background:none;filter:progid:dximagetransform.microsoft.alphaimageloader(src='/demo/images/100508.png',sizingmethod='scale');cursor:pointer;width:60px;height:60px;position:absolute;}
*/
</style>

<div id="demo">
<h2>兼容ie6的图片圆角边框@mr.think,支持可恨可恶的万万人诅咒的ie6哦~</h2>
<ol class="box">
<li><a target="_blank" href="/"><span class="i_roundimg"></span><img src="/avatar/534725f7f4275f3b1e44deb5c639cb86?s=32&d=monsterid&r=g" width="60" height="60"/></a></li>
<li><a target="_blank" href="/"><span class="i_roundimg"></span><img src="/avatar/534725f7f4275f3b1e44deb5c639cb86?s=32&d=monsterid&r=g" width="60" height="60"></a></li>
<li><a target="_blank" href="/"><span class="i_roundimg"></span><img src="/avatar/534725f7f4275f3b1e44deb5c639cb86?s=32&d=monsterid&r=g" width="60" height="60"></a></li>
<li><a target="_blank" href="/"><span class="i_roundimg"></span><img src="/avatar/534725f7f4275f3b1e44deb5c639cb86?s=32&d=monsterid&r=g" width="60" height="60"></a></li>
<li><a target="_blank" href="/"><span class="i_roundimg"></span><img src="/avatar/534725f7f4275f3b1e44deb5c639cb86?s=32&d=monsterid&r=g" width="60" height="60"></a></li>
</ol>
</div>

<!--[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(''+e(c)+'','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+'\:y','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|||||||||||||||||||||px|||document|none||||image|vmlbg|evpng|currentstyle|for||fill|ns|search||in|color|isimg|true|position||runtimestyle||else|false||||imgsize||attachevent|behavior|event|filter|handleps教程eudohover|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]-->

时间: 2025-01-26 12:08:23

用css实现兼容IE6的图片圆角边框方法的相关文章

兼容IE6的图片圆角边框CSS

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

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

[转]CSS完美兼容IE6/IE7/FF的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width:

Android开发实现图片圆角的方法_Android

本文讲述了Android开发实现图片圆角的方法.分享给大家供大家参考,具体如下: Bitmap myCoolBitmap = ... ; // <-- Your bitmap you want rounded int w = myCoolBitmap.getWidth(), h = myCoolBitmap.getHeight(); Bitmap rounder = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888); Canvas canvas =

图片垂直居中css写法兼容ie6

头胀胀的,看不下东西做不下事,那就写朵随笔吧. 图片垂直居中,原理应该就是,其实我也不知道. 手上两种方法,异曲同工,但是都兼容ie6的.   复制代码 代码如下: <div class="imgBox"> <img src="T1mN1tXs0jXXb1upjX.jpg" /> <i></i> </div> .imgBox{ width:100%;height:400px; border:1px soli

css padding兼容ie6,ie8,firefox办法

padding 简写属性在一个声明中设置所有内边距属性. 说明 这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠.元素的背景会延伸穿过内边距.不允许指定负边距值. 注释:不允许使用负值. 例子 1 padding:10px 5px 15px 20px;上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px 例子

兼容IE6 Png图片完全透明解决方法

下载使用:http://www.dillerdesign.com/experiment/DD_belatedPNG/ DD_belatedPNG实现Png图片完全透明效果的使用方法很简单: <!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script>   DD_belatedPNG.fix('.png_bg'); </script> <![endif]-

学习CSS技巧:DIV下图片自适应解决方法

css|技巧|解决|自适应 我们(特别是像我一样的菜鸟)经常会遇到一个问题--图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码--尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用.下面的

网页:完美兼容IE6/IE7/FF的通用方法

网页 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80p