前言
对于程序员来说,一听到你做的程序必须兼容IE6(当然主流浏览器肯定得兼容的),那颗滚烫的心瞬间哇凉哇凉的,但是有时,项目就要求这样,你也只能硬着头皮跟IE6来个亲密接触,最近正好做了个项目,关于兼容IE6,真是废了点功夫,特此记录一下,方便以后查阅,也方便以后园友遇到同样问题可以参考一下。
正文
I.png透明图片不支持透明。
简介:项目中运用一部分png图片,在IE7以上,火狐,谷歌均是正常显示,但在IE6中,PNG图片背景出现差异,有时纯黑,有时纯白,有时纯灰等等,而不是透明,经过一番查阅,才知IE6对PNG图片的支持不是很好,只能通过其他方式来弥补;
效果还原:
看过这几张图片,相信大家已经明显看出差异性;为什么会出现这种差异呢?也许下面这段话可以帮助各位理解一下。
PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可 存储多到16位的α通道数据。PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF 格式出色很多,经常用的PNG格式一般为PNG-8或者PNG-24,PNG-24在IE6中处理比较麻烦一些,而且很容易出问题,所以在必须用PNG情况下,可以考虑用PNG-8格式,如果含有透明背景,再做相关兼容操作。
解决方案:
①将PNG图片改成GIF格式;这是最简单粗暴的方式,也是最有用的,不过GIF格式图片如果直接由PNG用PS转换会出现锯齿情况(楼主就是这样搞的,此为用到的方法之一>.<),不过如果一开始就搞成GIF的,这对P图的人在精度方面要求高一些,GIF如果够大,很容易出现锯齿情况。
②运用滤镜Filter:
background:url(ImgURL) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ImgURL");