【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

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

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

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

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

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

测试实例:https://www.html.cn/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使用

测试实例:https://www.html.cn/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

测试实例:https://www.html.cn/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:https://www.html.cn/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2(官方,e文):https://www.html.cn/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.htcblank.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:https://www.html.cn/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2(官方,e文):https://www.html.cn/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/

测试实例:https://www.html.cn/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

评论 18

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    第四种方法的标题错了。

    不知道 DD_belatedPNG 效果好还是 IE PNG Fix 2.0 Alpha 3 好用

    d10年前 (2009-07-14)回复
  2. #-48

    其实稍微好用点的还是加载.htc的方法,但是会造成严重的浏览器负担,很不适用多处使用,一个页面有4处以上就很明显了..
    第4种方法太危险了…

    肥皂圈9年前 (2009-09-12)回复
  3. #-47

    愚人怎麼這麼喜歡用黃色字啊,看得眼睛花~~
    -_-”’

    螞蟻9年前 (2009-09-23)回复
  4. #-46

    总算用js实现了ie6支持png半透明图片,谢谢码头的资源分享!

    time9年前 (2010-03-06)回复
  5. #-45

    为什么我在ietester下测试都不行呀

    jane8年前 (2011-02-16)回复
  6. #-44

    为什么我在ietester下测试都不行呀 +1 (同问)

    windrainpy7年前 (2011-09-15)回复
    • @windrainpy, IETester下会有好多问题,一开始我也搞不明白,后来开了虚拟机的IE6,结果是好的

      瓶子7年前 (2012-01-10)回复
  7. #-43

    不对啊 https://www.html.cn/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html 在ie6下没有效果 求解释

    突破7年前 (2011-09-22)回复
  8. #-42

    lz 不对啊 https://www.html.cn/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html 这个在ie6下 没有效果 求解释

    web7年前 (2011-09-22)回复
  9. #-41

    很艰难的实现了半透明,其实真的能避免最好避免掉在IE6使用这种效果,太消耗性能了。

    Owen7年前 (2012-01-06)回复
  10. #-40

    第三种方法,很简单,又很麻烦,只能在页面里加 behavior,在CSS里加也可以,不过路径还必须是页面本身的相对路径才会生效,我就想问,假设我的首页有png图片,一些二级三级子文件夹也有png,是不是我在这些页面内部也得写behavior呢?现在不是不提倡这么写了么,为什么不能改进一下,直接定义在CSS里?

    瓶子7年前 (2012-01-10)回复
  11. #-39

    ietester ie6不支持 透明

    冉冉5年前 (2014-04-23)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏