目前最佳ie6下png透明解决方案

828 views

关于ie6下png图片的透明问题,市面上有很多的解决方案【我在前面写过2篇相关文章(透明png在ie7显示为黑色背景的解决办法关于ie6中使用css滤镜后链接无法点击的问题)】,主要有以下2种:

(1)、js修复法:

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=”/\’”" + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(“onload”, correctPNG);

(2)、css滤镜法:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/images/**.png”);

上面2中方法都有一些缺陷。如链接失效问题,虽说可以用position:relative来修复,但是不一定百分百管用。

今天我主要介绍一种更加完美的解决办法,那就是

DD_belatedPNG

如何使用:

1、先点击上面的链接去下载DD_belatedPNG.js,里面有一种压缩版本,一种未压缩版本。你下载哪个都行,下哪个在网页引用js的时候就用哪个的文件名。

2、在页面中应用js:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');

  /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
<!--[endif]-->

3、ok!


									
Category 经验记录 Tagged , , , , , Post a comment or leave a trackback: Trackback URL.

16 Comments

  1. Posted 2009年09月25日 at 20:29 | Permalink

    PNG的透明还真难啊,还是gif用起来的简单`~

    [回复]

    aisinvon Reply:

    @三脚猫, 关键有些情况不得不用png啊

    [回复]

  2. Posted 2009年09月25日 at 21:24 | Permalink

    不用IE6很久

    [回复]

    aisinvon Reply:

    @白银时代, 我也不用很久啦

    [回复]

  3. Posted 2009年09月25日 at 21:32 | Permalink

    IE 基本被封杀了

    [回复]

  4. Posted 2009年09月25日 at 22:44 | Permalink

    走自己的路,让IE用户哭去吧XD

    [回复]

    aisinvon Reply:

    @lovee, 调试ie6的问题都能把我弄哭咯

    [回复]

    小毅 Reply:

    @aisinvon, 写主题的时候,哭的眼都瞎了。哈哈

    [回复]

  5. Posted 2009年09月25日 at 23:13 | Permalink

    额 没早点看到
    我的解决方案是 直接把png的背景弄成了白色····

    [回复]

    aisinvon Reply:

    @小鸡哥哥, 现在学习也行啊

    [回复]

  6. Posted 2009年09月25日 at 23:30 | Permalink

    正需要这个 没想到你居然帮我分析好了 做了一个有阴影的登录框 但是PNG在IE6下却无法表现 让人很是郁闷 只好修复那个该死的BUG了

    [回复]

    aisinvon Reply:

    @Eleven, 恩,能帮到你就好

    [回复]

  7. Posted 2009年09月25日 at 23:47 | Permalink

    这是个好方法,不过网页弄成白色背景最方便了,省事的办法。

    [回复]

    aisinvon Reply:

    @亦歌, 但是有时设计图并不是我做的,要按别人的设计图来,没办法

    [回复]

  8. Posted 2009年09月26日 at 00:55 | Permalink

    我都尽量不用复杂的主题了。站长统计的数字显示IE6还是占据大片江山啊- -!!

    [回复]

    aisinvon Reply:

    @晴空落叶, 是啊,所以没办法,我们做网页现阶段还是必须得兼容ie6哇

    [回复]

    小毅 Reply:

    @晴空落叶, 很庆幸,问了很多人,一般IE的占有率正在高速下滑。哈哈,福音啊,希望Win 7 的推广能彻底改变这一糟糕的状款。

    [回复]

    aisinvon Reply:

    @小毅, 嗯,我巴不得ie6赶紧消失在地球上

    [回复]

  9. Posted 2009年09月26日 at 07:54 | Permalink

    以前弄了个引导页就是PNG的图片。因在IE6下不能显示。所以就没用了。 在网上找了些方面也没效果。
    所以现在PNG的也不怎么用了。 有GIF替代了。

    [回复]

    aisinvon Reply:

    @阿东, 嗯,有些情况下用gif代替是方便多了

    [回复]

  10. Posted 2009年09月26日 at 19:18 | Permalink

    基本不用了。

    [回复]

  11. Posted 2009年09月26日 at 21:21 | Permalink

    jq有这么一个插件,还算不错~

    [回复]

  12. Posted 2009年09月26日 at 22:30 | Permalink

    最后的代码好像有点小差错哦 最后我去那个英文网看的 效果还蛮好的

    [回复]

    aisinvon Reply:

    @Eleven, 哪里,没发现啊

    [回复]

  13. Posted 2009年09月27日 at 09:29 | Permalink

    喜欢那个CSS滤镜法

    [回复]

    aisinvon Reply:

    @Hobo, 各有所好,能解决问题就行

    [回复]

    小毅 Reply:

    @Hobo, 据说会卡住浏览器的,特别是对象本来就是性能极差的IE6…………

    [回复]

  14. Posted 2009年09月27日 at 13:41 | Permalink

    暂时不用,收藏之

    [回复]

    aisinvon Reply:

    @sleepy, 多谢收藏

    [回复]

  15. Posted 2009年09月28日 at 22:31 | Permalink

    一直想解决这个问题,就是解决不了,马上下载来看看,多谢分享了

    [回复]

    aisinvon Reply:

    @Gonten, 不客气,能对你有帮助就好

    [回复]

  16. Posted 2009年09月29日 at 20:52 | Permalink

    呵呵,以后要用再慢慢看

    [回复]

    aisinvon Reply:

    @jaycn, 恩,学习就是积累

    [回复]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>