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. No object in the CompoundRoot has a publicly accessible property named

    No object in the CompoundRoot has a publicly accessible property named 'typeid' (no setter could be ...

  2. MyEclipse取消Show in Breadcrumb的方法

    eclipse中的Show in Breadcrumb是快速导航条,可以清晰的看到我们当前的类,属性或方法的导航 定位. 如果不喜欢的话,取消掉的方法如下: Window -> Customiz ...

  3. Android开发过程中git、repo、adb、grep等指令的使用

    chown 是一条在Unix系统中用于设置文件所有者和文件关联组的命令. 需要超级用户的权限才能执行此命令.只有超级用户和属于组的文件所有者才能变更文件关联组.非特权用户(非超级用户)如需要设置关联组 ...

  4. 虚拟化平台cloudstack新版本的调试

    虚拟化平台cloudstack(7)——新版本的调试 调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 源码下载及 ...

  5. Java笔记：枚举类

    1.一个类的实例是有限且固定的,这个类称为枚举类.比如季节类,只有四个对象(春.夏.秋.冬) 2.手动实现一个枚举类(1)通过private将构造器隐藏起来(2)把这个类的所有可能实例都使用priva ...

  6. 关于props和state以及redux中的state

    React的数据模型分为共有数据和私有数据,共有数据可以在组件间进行传递,私有数据为当前组件私有.共有数据在React中使用props对象来调用,它包含标签所有的属性名称和属性值,props对象有三个 ...

  7. Eclipse 中，web项目在Tomcat运行时填写不了Server name

    最近开发项目,从MyEclipse中导入项目到Eclipse中,那些WEB属性都在,可就是不能在Tomcat上运行.纠结一番,最后发现是这个问题: WEB的版本问题. 具体问题看下图: 解决方案: W ...

  8. 如何编译Apache Hadoop2.2.0源代码

    转自(原文图片已丢失,本文修复图片,重新排版,并更正部分原文错误):http://www.superwu.cn/2013/12/26/913 欢迎和大家交流技术相关问题: 邮箱: jiangxinnj ...

  9. Python_day1 基础语法

    1.基础语法变量: 在左侧自定义输入变量名,右侧可以输入任意类型赋值给左侧,如需制定类型,可以强转name = Jason, age = int(24) provience = ['beijing', ...

  10. CodeForces 721D Maxim and Array

    贪心,优先队列. 先看一下输入的数组乘积是正的还是负的. ①如果是负的,也就是接下来的操作肯定是让正的加大,负的减小.每次寻找一个绝对值最小的数操作就可以了. ②如果是正的,也是考虑绝对值,先操作绝对 ...