IE6的PNG透明解决方案-创新互联

现在切出来的很多设计图都是PNG的,而PNG透明的图在IE6下会出现灰底的现象,这会让人很头疼,看了W3cfuns提出的8中解决方案(链接),挺好的,但是稍微分析了下,比较完美的是下面的2种方法。IE6的PNG透明解决方案

解决IE6png的方法主要有滤镜、纯CSS、原生js、jQuery或者引入插件等方 法。但是以上方法的缺点很明显,要么是不支持IMG标签的,或不支持background,不支持CSS Sprite,不支持hover的种种问题。而且有的写法也很麻烦,导致代码很复杂,然后我觉得以下两种方法是不错的。

成都创新互联公司专注于企业营销型网站、网站重做改版、鞍山网站定制设计、自适应品牌网站建设、H5建站商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为鞍山等各大城市提供网站开发制作服务。

一、引入DD_belatedPNG.js文件

使用方法:下载该文件(下面给出代码,DD_belatedPNG)

然后引入并运行,代码是

1 2 3 4 5 6 <!--[ifIE6]>    <scripttype="text/javascript"src="js/EvPng.js"></script>    <scriptlanguage="javascript"type="text/javascript">    DD_belatedPNG.fix("*");    </script><![endif]-->

w3cfuns的解决方法是,在每个用到png的标签都加上id或class,然后写成

1 2 3 4 window.onload=function(){    DD_belatedPNG.fix(".pngFix,.pngFix:hover");}

这样子的写法的话,你在写html的时候就得增加很多代码,而我们也知道css中的*代表全部,所以把fix里面改成*,一切问题都很好解决。

优点:
1、CSS代码无需任何修改,按照平时的思路来写即可;
2、无需配置;
3、没有多余的gif图片;
4、支持img;
5、支持平铺;
6、支持CSS Sprite;
8、支持Hover等伪类;

缺点:
1、额外加入了js文件(6.39k)和http请求,可以忽略不计;
2、当文件载入之前,会先暂时呈现灰底;
3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);

二、引入EvPNG.js文件

步骤跟上一种方法是完全一样的,只是引入的JS文件不一样罢了,点击下载EvPng,引入并运行

1 2 3 4 5 6 <!--[ifIE6]>    <scripttype="text/javascript"src="js/EvPng.js"></script>    <scriptlanguage="javascript"type="text/javascript">    EvPNG.fix("*");    </script><![endif]-->

优点和第一种方法一样

缺点:
1、额外加入了js文件(文件4.93k,比DD_belatedPNG的6.39k还小)和http请求,可以忽略不计;
2、当文件载入之前,会先暂时呈现灰底;
3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);
4、使用CSS Sprite技术的hover效果在部分情况下top可能会有1像素的偏差。

所以呢,建议使用第一种方法,全能了

网站名称:IE6的PNG透明解决方案-创新互联
文章源于:https://www.cdcxhl.com/article28/ccedcp.html

成都网站建设公司_创新互联,为您提供云服务器虚拟主机品牌网站设计企业建站网站维护品牌网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站建设