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之!important认知

在实现ie6最小高度的时候,看到利用!important来实现ie6和其他浏览器相区分的方法,有点疑惑,因为印象里ie6是支持!important的。但是具体记不太清了,就查了一下相关知识。总结如下:

当在一个选择器中,利用!important改变样式优先级的时候,IE6下是无效的,后面的样式覆盖了前面的,!important被彻底无视了,利用!important进行hack正是利用了这一点。而当在不同选择器中应用!important时,IE6是认得!important的。

例:

#cDiv{
color:red !important;
color:green;
}



cDiv
 

“!important”的声明IE6也是支持的,只是需要进行分块定义。

#aDiv{
	color:red;
}
#bDiv{
	color:red !important;
}
	

aDiv
bDiv

参考:http://www.wkeke.cn/archives/ie6-and-important/