ie6png透明之双剑合璧

昨天费劲周折,终于在下班的时候将导航的png透明给改对了。实在太费劲了,大致将过程记录一下。包括最后的解决方法,就是这篇的主题,给出两种解决png透明的用处(用在何处最好)。

问题:导航的图标是不透明的,选中一项后的背景是透明的,图标有两种状态,激活状态时变亮,其他状态为暗。症状为ie6下选中某项后,背景不透明。

开始使用的是DD_belatedPNG.js这个方法,思索可能是由于单张png图片太小引起的。于是大费周折的将背景和图标合了一下,但是测试其他浏览器通过,ie6的图标都是暗的。虽然选中的效果有了,但是渲染很慢。认为是选中的selected没有加上,通过DebugBar插件查看页面结构发现加上了。(注:ie6下通过查看源代码,查看到的页面结构是原始的,看不到页面进行dom操作后的代码。)

后来测试人员在排查其他问题的时候,遇到一个类别中转到另一个类别的时候,内容切换到了,但是选项卡还保持在之前,想到DD_belatedPNG.js的工作原理,使用了微软的VML语言进行绘制,可能是这个过程太慢,或者中断引起的。就尝试屏蔽掉,发现果然是这个东西引起的错误。大体还得出另一条结论:在利用cssSprite处理png透明效果时,涉及背景图片位置改变时,使用DD_belatedPNG.js,渲染会出问题。

这时想换一种方法解决,iepngfix,对就它。优点简要介绍下:支持设置背景位置和图片重复。解决上面遇到的问题,试一下先,经过复制相关代码,进行静态页调试,ok。静态页通过了,但是放到测试环境上面,发现效果可以,也透明了,选中后也变亮了。但是速度非常的卡,存在一个非常严重的问题,当选中一项后,要再点一下才能出现背景,点其他项后,要鼠标经过才行。

就这样,纠结的几个小时。眼见太阳西落,然此问题仍旧。修改的同时,也引发了新的问题。于是无奈的回到了修改之前的状态。

这时想到(太悲催了)既然选中后背景效果有问题,就换个不透明的,比较了一个选项卡选中后的背景一样,就改成了png8格式的,解决了一个问题。

这时也发现上文所说的,ie6下面点击后类别图标不变亮的情况。此时使用的是DD_belatedPNG.js,于是便改成了iepngfix,问题解决了。

今天早上发现,在选项卡上还有一个图标背景,上面显示数字,作用是标示变化。背景也是png24的,在ie6下面没有了。不思其解后,想将其转换为png8,然效果太难看了,又在DD_belatedPNG.js,添加了图标的背景过滤。

至此,问题解决。真是神马“最佳IE6环境下实现PNG-24的应用方案”,一切都是浮云,实践出真知。双剑合璧,才显现最大威力。

有兴趣可翻阅之前的一篇文章ie6之png透明小记,里面到unitpngfix的介绍。

最后,ie6,哥祝你早日死掉吧。

ie6之png透明小记

今天编辑提了一个网站的bug,是一个焦点图透明的问题,用的是在网上找来的一个焦点图代码,开始上线的时候,没有测试ie6。

发现这个问题后,就着手开始解决,正在做的项目中用的是DD_belatedPNG.js这一个东东,就直接拿过来用了,但是发现一个问题,就是换上后焦点图不动了,而且焦点图下面的数字有一块是平铺的,但是平铺背景这块是无效的。

于是考虑换一个,找到了unitpngfix,这个东东,虽然使用简单,但是属于简单的一刀型,把所有的png都给整了一遍,后果是我的页面用png8的多,花了。于是放弃。

后来无奈之下想到把png24给转回到png8,转了一下后,发现在美观大打折扣。

内心纠结之时,想到之前下载的焦点图源码,再看看,直接发现灰字提示:“注意:按钮使用PNG图片,IE6不兼容背景透明,请使用更高版本的IE浏览器。”

小小的郁闷了~~看来ie6,确实应该扔了。

摘抄一段话:“10年了。要继续用的话就不提出新需求。一个更新的东西怎么提供新功能? 不懂技术的人是不知道什么ie6,7,8的。懂点技术的人情不要一厢情愿地认为大家还用ie6.他们还用是因为他们不知道。我觉得懂点技术的人应该推广最 新的浏览器给不懂的人。而不是去兼容ie6。现在不是用户偏爱ie6而是他们根本不知道什么是ie什么是浏览器。”

确认是很多人都认可赞同的,但是事实是开发人员大都是很薄弱的,力量有限。

于是,死心不改的,思索到,这个焦点图的源码提供者的网站,是一个做的不错的站点,不应该放任这个错误不管吧。就到了他们的网站,用ie6打开,等待,仍旧不透明,等待,终于透明了。就打开了源码,开始查看其使用了那种方法,惊见引用了名为ie6.js,我立刻想到了,ie7、8、9这一类脚本让ie6实现一些功能,但是打开源码后,发现有点熟悉的感觉,在通过上面版权网址访问打开,终于知道了,原来是使用了iepngfix ,这个方法,早在08年自己琢磨整合css框架的时候,就用到过,当时还认为是解决png透明的最好方法。后来就渐渐少用了。这次使用主要感受就是:对png24背景平铺处理的比较好。

于是下载下来,开始调试,完成上线。

使用小提示:

iepngfix.htc里面gif图片的路径要写正确,如果和iepngfix.htc在同一级目录,就如下写就行了。

IEPNGFix.blankImg = thisFolder + ‘blank.gif’;

 

附参考网址:

http://www.twinhelix.com/css/iepngfix/

http://unitinteractive.com/labs/unitpngfix.php

http://www.dillerdesign.com/experiment/DD_belatedPNG/

 

CSS框架整合应用之png透明

解决IE6PNG问题
本例采用iepngfix实现。虽然网上流传多种方法,但实测这种方法还是稍好一些的。使用中所需要注意的是路径的问题,iepngfix.htc及里面blank.gif的路径是针对显示页面的。而不是css样式表里面的。本例中是在global.css里面调用的。

1、注意路径的问题。

2、如果是p段落,或是img标签增加背景,需要在引用的时候增加。例:img,div,p,input { behavior: url(js/iepngfix/iepngfix.htc)}

3、问题主要针对ie6,ie7和firefox等无此问题。

iepngfix介绍:
IEPNGFix提供了很有实用价值的解决方案,现在IEPNGFix 2还新增支持设置背景位置和图片重复。现在你可以使用完整的半透明效果,你的网页不会再出现丑陋的灰色边界。使用很简单,只需要在你的CSS文件中增加一行,不改变任何其他HTML代码。img标签和背景图片现在都支持了。

获取最新版本,到http://www.twinhelix.com

例子测试(普通png图片、png背景图片、按钮测试)查看实例

做个小结吧
这个方法不错,但是调用时候,可能占用资源较多,建议页面还是少用png图片。另本文所有资料为收集,自己仅整理一下,方便使用。