当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 同一张PNG8图片为何部份图标在IE6中消失

CSS样式表
CSS入门 XHTML文档结构树
IE6下 vertical-align:middle 和 height 引发的边框消失
详解CSS(层叠样式表)渐进增强
css vertical-align属性详细图解分析
CSS 垂直居中的5种实现方法
css 条件注释使用指南
CSS 样式表书写风格分析
CSS教程:条件注释的格式以及作用
探讨:网页外部引用CSS的两种方式
简化的CSS Reset:15套CSS重设实例
CSS技巧:IE6用import导入CSS的问题
编写适合所有项目的通用的reset.css
英文css教程:Introduction CSS
CSS学习之CSS网页制作的10个技巧
条件CSS的高级用法
纯语义化XHTML CSS设计表单方法
CSS 浏览器兼容问题整理大全(比较全)
import link的具体区别
菜单 stepdown 呈递下沉的解决方法
CSS3 box-sizing属性

CSS样式表 中的 同一张PNG8图片为何部份图标在IE6中消失


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 103 ::
收藏到网摘: n/a

在项目中遇到一情况让困扰了半天,同一张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那样会有一个灰色的背景。