IE6中隐形的PNG8图片
在项目中遇到一情况让困扰了半天,同一张PNG8图片为何部份图标在IE6中消失呢?当时一度怀疑是cache或hosts问题反反复复开关浏览器结果依然无效,连番测试终于找到了原因。
问题在于PNG8图片本身,以下l例子模拟了当时情况,当使用IE6来浏览的会发现第二行的4个图标隐形了。Demo
原来下面的4个图标被调了90%的”Alpha透明度”(FW在导出PNG8的时能保留“Alpha透明度”PS则做不了这一点)。

而被Alpha半透明的图标在一般浏览软件或FF、Chrome、Safari、Opera、IE7以上浏览器都可以正常浏览,唯独是IE6。
其实也有办法让IE6支持PNG8的”Alpha透明度”,方法与PNG32的IE滤镜一样。Demo
从来上面结果得知原来是 png8“Alpha透明度”闯的祸。而且这次PNG8不同于png32的是,不支持png半透明的浏览器(如ie6)会自动降级到全透明(像gif那样),而不是像png32那样会有一个灰色的背景。


ytzong 2009 十一月 20th at 19:58 Says:YUI有时利用alpha透明的png-8来做渐进增强,比如圆角半透明阴影
不过国内还没人这么大胆

Gulu77 2009 十一月 20th at 20:08 Says:曾做过测试,做了一张256颜色以下的alpha透明图片,分别保存png8与png32,结果8比32(即ps的png24)节省大约60%的体积。

bigCat 2009 十一月 22nd at 12:19 Says:哈哈,我新皮肤的logo就是alpha透明的阴影png-8,ps搞不定,只能fireworks搞,体积小,很赞

Leeiio 2010 一月 28th at 11:48 Says:@Gulu77 那是因为没有alpha通道呗,这个很占大小的。

Gulu77 2010 二月 9th at 10:21 Says:@Leeiio 英雄有见地~