轩枫阁

首页 / Web前端 / IE6的PNG透明解决方案

IE6的PNG透明解决方案

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

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

一、引入DD_belatedPNG.js文件

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

然后引入并运行,代码是

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

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

优点:

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

缺点:

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

二、引入EvPNG.js文件

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

优点和第一种方法一样

缺点:

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

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

本文标题:IE6的PNG透明解决方案 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
338/440
340/440

相关文章

文章评论

  • 谢谢分享

  • 我的IE6下全部图片显示不了。看了几个其他网站用这两个插件都无法显示图片

    • 图片不显示是属于路径问题吧,png格式的图片在IE6下指示表现的不完美,不是不显示哦

      • 路径不会错的,没加之前全部能显示, 加了DD_belatedPNG.fix(“*”)后,图片没显示,说明图片路径是对的,JavaScript也是生效的。我以前做的项目也用的是DD_belatedPNG,以前可以,现在也不行了。是不是我IE6的版本有问题

        • 给这个“DD_belatedPNG.fix(“*”);”加上wondow.onload没

          • 已经确认是我这台电脑里虚拟机里的IE6问题,用这两种方法都无法显示,不值淘宝京东用的是什么方法,他们的都能在我的IE6下显示出来

    • 不好意思,之前写的代码由于疏忽不全面,现在改好亲测可行,你可以留个邮箱,我给你发demo也行

      • 好的,邮箱地址是401828628@qq.com现在用的是DD_belatedPNG的解决方案,在虚拟机那台XP下的IE6下不通过,但是在一台实体机的IE6下测试通过

      • 测试了,我虚拟机IE6的问题

  • 最近写项目遇到的问题,总结下,以后总有用处~

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]