ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。

很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。

这个BUG给我们带来了很大的困扰。

但是这仍然存在很多问题，比如半透明的PNG背景图片。

Gulu77整理了4种IE6中PNG Alpha透明的方法：

测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html

这里用IE6测试，插入的图片和背景图片没有透明。

第一种方法：AlphaImageLoader 筛选器

微软给出了一个解决方案：http://support.microsoft.com/kb/294714/zh-cn

使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)

注意事项:

AlphaImageLoader难以实现插入图片<img src=”.png”/>透明

AlphaImageLoader方法用于背景图片上,实现background-image的效果

AlphaImageLoader IE8不支持

因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用

测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

第二种方法：PNG Transparency in IE

使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度

注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了

官方原文：http://codingforums.com/archive/index.php?t-80555.html

测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

第三种方法：IE PNG Fix v1.0 / 2.0 Alpha 3

这是目前最新版本，今天重点介绍的一个方法。

使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。

测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

  • 支持<img src=”">元素。
  • 支持的背景PNG图像（不像许多其他的脚本！ ）
  • 支持CSS1背景重复和位置（通过可选插件）
  • 背景图像可以被界定内置或在外部的样式表。
  • 自动处理改为钢骨混凝土/背景通过正常的JavaScript （例如鼠标悬停翻车） -没有特殊的编码需要。
  • 改变支持包括CSS的’类别’的变化因素。
  • 采用自动变通的<a href=”">要素巴布亚新几内亚背景因素。
  • 微小的脚本（快速下载） 。
  • 领有牌照的下一个自由软件许可证。如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤，将此添加到您的网页：
    1. 复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
    2. 复制并粘贴到您的网站的CSS或HTML ： 
      <style type="text/css">
      img, div { behavior: url(iepngfix.htc) }
      </style>

      这的CSS选择器必须包含标签/内容要巴布亚新几内亚支持-基本上，给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。宏达相对H TML文件的位置（不相对的CSS文件！ ） 。 例如，你可能看起来像这样：

      <style type="text/css">
      img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
      </style>
    3. 如果您的网站使用的子文件夹，打开。宏达文件在文本编辑器如Windows记事本，并改变blankImg变数，包括正确道路blank.gif像这样：
      IEPNGFix.blankImg = '/images/blank.gif';

      同样的路径是相对的HTML文件。否则，你将看到一个“破碎的形象”的图形！

    4. 如果你想支持CSS1背景重复和背景位置，请务必包括附加。 js文件在您<head>：
      <script type="text/javascript" src="iepngfix_tilebg.js"></script>

      否则，背景图片可以工作，但不会重复或立场。

    5. 可以舒舒服服地坐下欣赏！ 也许考虑捐助，以支持该脚本的发展如果你喜欢您所看到的，因为我花了数百小时的开发，测试和支持它： ） 。 另外，我一定会感谢一个入链接您的网站到地雷！
      官方原文：http://www.twinhelix.com/css/iepngfix/

    如果你有兴趣了解更多信息或另一种方法激活的脚本保持审定的CSS相容性，看到源代码演示文件。

———————————————————————–

如何解决共同问题

1.我已经贴在CSS中，但我pngs并不透明！

请务必记住，路径个文件是相对于HTML文件，而不是的CSS文件（如的CSS背景图像） 。 如果您想要测试的路径，插入： alert('This works!');进入。宏达文件。

2.它的工程离线而不是在线。

第一次尝试解压这个预设的示范和上传到Web服务器原样。 如果它不工作，您可能有一个MIME类型的问题。您必须确保您的服务器发送正确的MIME类型“文本/的X组成部分”的。宏达文件。 尝试之一，这两个容易修复程序：

3.上传的。 “ htaccess ”文件，该脚本的下载压缩到Web服务器上，这将使阿帕奇发出正确的MIME类型。

4.而不是所谓的“ IEPNGFIX.HTC ”从你的CSS ，上传IEPNGFIX.PHP的同一文件夹中，并呼吁不是，这也发出了正确的MIME类型。

5.我pngs是透明的，但有一个有趣的边界或红色的“ X ”图标。

检查blankImg变量设置正确的。宏达文件，再次相对应的HTML文件，载PNGs 。

图像扭曲，或此脚本休息，我的网页布局。

当适用于图像没有设置方面，该脚本将尝试与“猜测”正确的图像尺寸和适用的。如果它获得做错了什么，给您一个明确的图像width 。

链接或表单元素一个png’d元素是不能点击。

测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

第四种方法：IE PNG Fix v1.0 / 2.0 Alpha 3

使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
官方原文：http://code.google.com/p/ie7-js/

测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

转载请注明转自《【IE6的疯狂之二】IE6中PNG Alpha透明(全集)》

【IE6的疯狂之二】IE6中PNG Alpha透明(全集)的更多相关文章

  1. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  2. 【IE6的疯狂之四】IE6文字溢出BUG

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...

  3. 【IE6的疯狂之三】IE6 3像素BUG的实例

    问题:2列布局.左列固定,右列液态我需要做一个布局.2列,左边列固定宽度.右边列使用剩余宽度.整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度.但是我写 ...

  4. 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG

    大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...

  5. 【IE6的疯狂之十二】一个display:none引起的3像素的BUG

    今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码:   <div style="width: ...

  6. 【IE6的疯狂之九】li在IE中底部空行的BUG

    曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...

  7. 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）

    今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...

  8. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  9. 【IE6的疯狂之五】div遮盖select的解决方案

    IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...

随机推荐

  1. 推荐前端开发使用的服务器环境开源项目 D2Server 可替代Apache

    攻欲善其事,必先利其器.前端开发,编辑器我们有了Sublime Text2,配置Server环境用……你可能会选择Apache,为什么呢?因为能供选择的选项实在太少.而现在,我向大家推荐一个针对前端开 ...

  2. 大数据应用日志采集之Scribe演示实例完全解析

    大数据应用日志采集之Scribe演示实例完全解析 引子: Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它能够从各种日志源上收集日志,存储到一个中央存储系 ...

  3. S3C2440之IIC裸机驱动

    花了两天的时间终于把这个搞定了,其实I2C的原理还是比较简单的,只是几个细节性的东西还是需要特别的注意,主要是需要注意一下几点: 1.rIICCON &= ~0x10; 清中断必须要在rIIC ...

  4. hdu4474 Yet Another Multiple Problem

    Yet Another Multiple Problem Description There are tons of problems about integer multiples. Despite ...

  5. java 逆波兰表达式

    最近想把这破机 装成WIN7 想想还是算了 ...  反正用的机会也不多. 不过 发现了一些 想念的东西 从前的作业. 从前的记忆. package org.lmz; import java.util ...

  6. iOS开发： 关于Certificate, Identifier & Profile

    简介 苹果的iOS系统是封闭的系统.苹果的设计是保证每一个软件有确定的开发者/厂商(保证不被第三方进行未授权修改),只能在指定的设备上运行.为达到这些目标,苹果设计了一系列的机制. Certifica ...

  7. protubuffer for windows配置指南!

    windows下Google Protocol Buffer 编译安装教程     protobuf的全称是Protocol Buffer,它是google 的一种数据交换的格式,可用于用于分布式应用 ...

  8. gcc与g++的编译链接的示例详解

    一.编译方式的示例详解 1. 编译C代码 代码如下:main.c /*!  ************************************************************** ...

  9. Mvc分页组件MvcSimplePager代码重构

    1 Mvc分页组件MvcSimplePager代码重构 1.1 Intro 1.2 MvcSimplePager 代码优化 1.3 MvcSimplePager 使用 1.4 End Mvc分页组件M ...

  10. Java垃圾回收机制的工作原理

    Java垃圾回收机制的工作原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 获取更多内容,请关注小编个人微信公众平台: 一.Java中引入垃圾回收机制的作用 ...