让ie6对png透明图片支持起床

让ie6对png透明图片支持起来

一个老生常谈的问题就是ie6不支持透明png图片啊。但其实ie6只是不支持png-24格式的透明背景图片，但对透明背景的png-8图片还是支持的，只是png-8图片只有256色，放到任意浏览器都会呈现白色的锯齿。

当代码这样时：

<style type="text/css">
    .gif{
        width: 400px;
        height:200px;
        background:#f00 url(png8.png) no-repeat;
     }
 </style>

<div class="gif"></div>

div中的背景图片是下图的透明背景png-8图片：

让ie6对png透明图片支持起床

浏览器打开的效果如下（chrome，firefox，ie6+都是这么个效果）：

让ie6对png透明图片支持起床

看到这些泛白的锯齿要哭瞎了，怎么去除这恶心的锯齿呢，ps保存png-8图片时，有多个选项，经测试通过勾选“扩散透明度仿色”时锯齿的能达到最小，

让ie6对png透明图片支持起床

如下图所示，锯齿此时没那么恶心：

让ie6对png透明图片支持起床

但是远远不够啊，这个视觉效果还是太差了。上网查询下，这是由于png-8白色杂边导致的问题，可以在保存图片前将杂边的颜色设置成和背景一致来解决。

在ie6下的效果如下，其他浏览器显示效果也一致：

让ie6对png透明图片支持起床

此时ie6下png-8透明背景图片能正常显示了，且不只是针对ie6，对其他浏览器也是用，好像很好用，但是png-8只有256色啊，色彩不丰富，而现在广泛使用的png-24有2^24=1678万色，能展示很丰富的色彩，而且没有锯齿。所以如果原图色彩很丰富，那么只能转换为png-8图片作为降级的方法用到ie6上。还有个问题是，杂边处理的前提是图片覆盖区域的背景色是单色，如果是多种颜色，那么总会出现锯齿了。

我们需要寻找更灵活的方法，ie有专用的AlphaImageLoader过滤器，可以让ie6支持png-24的透明背景，而不是将透明色显示为灰色,这里要用到ie hack技巧，将background-image设置为none去掉背景图片，在使用滤镜加载图片。AlphaImageLoader过滤器中的参数src指向要显示的png-24图片，sizingMethod有3个可选值：crop：直接放置到容器中，图片左上角对齐容器左上角，image：让容器的边缘调整至包住整个图片，scale：让图片调整至充满整个容器。

      .gif{
        width: 400px;
        height:200px;
        background: #f00 url(ie6.png) no-repeat;
        *background-image:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_24.png',sizingMethod=crop);
      }

效果妥妥的：

让ie6对png透明图片支持起床

不过需要注意的是浏览器会有提示，需要用户点击允许才能运行滤镜效果，否则不仅没有滤镜效果，而且由于取消了背景图片，图片压根就看不到（只看到红色，字是见不到的，图略）：

让ie6对png透明图片支持起床

如果觉得一个个图片添加滤镜效果麻烦，还可以用js写个函数一次性将页面所有png图片抓出来添加ie滤镜效果。不过用户喜欢禁掉js脚本的话，就呵呵了。

还有一种方法是利用ie专有的css扩展--行为，引用.htc文件来修复png透明背景问题（也有使用.htc文件来解决圆角框的）:

div{
   behavior:url(iepngfix.htc);
}

这里有个介绍这种技术的网站：http://www.twinhelix.com/css/iepngfix/，也可以直接下载demo文件,详细使用流程在demo页面有引导：www.twinhelix.com/css/iepngfix/iepngfix.zip。

未引用htc文件，可以看到背景灰蓝色：

引用htc文件后，透明背景正常显示了（需要点击允许运行阻止的内容才能正常显示）：

让ie6支持透明背景的png的方法就总结到这里。既然是兼容，就不可能百分百完美，具体用什么技术去完成网页的开发还是要思量下再做决定。虽然开发者总是吐槽兼容旧版本浏览器很恶心，但是旧版本浏览器曾经也作出过巨大贡献。

ie6虽已是耄耋之年，但由于xp用户还是挺多的，而且一般家庭不换电脑的话就不会去升级浏览器，所以ie6退出历史舞台还需花费一些时日。在ie6剩余不多的生命时光，我们需要做的就是修好各种bug，静静等待ie6挂掉。

补充：

评论区有人说连ie8都不去兼容了，我不想多说，拿数据说话，下图截取自百度对浏览器市场份额统计。过去的3个月ie8用户占了21.62%，ie7用户占5.12%，ie6用户占3.85%，我想你作为开发者，不兼容ie低版本，难道是你的网站不对30%的用户开放？不兼容ie6，你的网站每100人中就有4人给差评。当然这个统计基于一般情况，如果知道访问自己网站的特定用户群都使用chrome或firxfox浏览器，那当然可以不去兼容ie低版本。js框架基本抛弃低版本，这个是事实，因为js框架大部分都是外国人写的！而外国人基本用chrome浏览器，这不符合国情，国内依然有很多人在用低版本的ie浏览器，甚至都懒得去升级。我始终觉得，不去兼容多方浏览器的不是好开发者，因为兼容各方浏览器是每个开发者的分内事，而你永远无法要求用户使用和你一样的浏览器。

让ie6对png透明图片支持起床

-------------------------------转载注明出处^_^： http://www.cnblogs.com/suspiderweb/

19楼假象、: 表示IE8已经不想支持了

18楼秋叶抚风: 唉，现在还在相关IE6，非悲催啊。。

17楼DLaboratory: 马上就要2016年了，但开发者们还要为如何兼容IE6忙得焦头烂额，不得不说是一种悲剧。。。。

16楼懒得安分: 怎么还在谈IE6解决方案咧？？？

15楼张小驴同学: 我作为一个兽医，治好了拉板车的黄牛，结果你过来对我说，都什么年代了，还用牛拉车。我也是醉了。，我是不是应该告诉牛的主人，赶紧把牛杀了吃肉吧，买台小卡车吧。

14楼unmi.cc: 楼主是在做纯学术研究，要不就是在做政府项目。现在不少 JS 框架 IE 8/IE9 都不愿支持了。

13楼sullivan123: 现在有些js框架都开始不再对IE9以下的浏览器支持，迫使使用高版本的浏览器。也是为了推动H5等技术的发展。

12楼韩子迟: 顶楼主，这样的研究值得学习

11楼frank.xuu: 同意

10楼杨中科: 如鹏网的用户中IE8一下的用户只占到1%，因此如鹏网不兼容IE6、7、8，，现在主流互联网用户中IE6的比例已经很低了

9楼己有能，勿自私: 做了那么多，还没准备被淘汰，这些时间花在研究h5上不好吗

8楼Я!ńɡ: iepngfix js完美解决，写这么长篇大论还没解决……

7楼张小驴同学: 反对楼上站着说话不腰疼的评论，博主就是有IE浏览器的用户，所以要解决IE浏览器的问题，你不用支持IE浏览器，是你的事，有必要在这里说博主什么“固步自封”吗？

6楼Liam Wang: 作为开发者，为了用户更好的体验，更应该引导用户使用主流较新的浏览器。用户又不是没得选择，只是很多用户不懂电脑，什么都用默认的。，兼容IE6，累死也活该。

5楼tenero: 什么年代了。还固步自封。

4楼艾边成—lred: 用户就是被惯坏了

3楼FreeSaber: 上天有个客户，我发了个云盘连接给他，然后告诉我说没法下载，看他的截图才知道用的猎豹浏览器。然后，我就让他装了个chrome！

2楼小火柴的蓝色理想: 首先，先支持楼主。研究本身并没有好坏之分，也没有进步和落伍的区别。研究历史的人一大堆，但并不是说他们就是落伍的人。IE6已经成为往事，但不代表着有些知识不值得去研究，因为IE6的怪异盒模型，有了现在css3的box-sizing的大量使用。新技术的出炉基本都是源于旧思想，太多变成规范的东西是被骂成渣的IE出的私有属性。如果只是实用主义，那学习就变成一场考试，考过就好。如果真的是研究学问，那深究原理，寻求多方法就是必须的了。大牛们之所以成为大牛大多是因为他们知其所以然，而不仅仅是会用库和工具而已。为什么张鑫旭前辈能成为大神，因为他把看似简单的样式和属性研究出花来。这就像那个经典的疑问，jquery玩的溜，还用了解原生js吗？做出东西，貌似不用，想做得好，必须得懂。

1楼James-yu: chrome有这么多人在用？看到很多人在用360浏览器，但是360在图上面算到其它里面了，我感觉360比其它那几个国产的多的多，是不是因为内核的原因，360统计到chrome和IE里面了？

让ie6对png透明图片支持起床

相关推荐