png 透明针对 IE6 一直是件挺麻烦的事情,使用的方法也是各有不同,大多的原理是用 IE 的滤镜来解决的。

语法:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled, sizingMethod=sSize, src=sURL)
  • enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。
  • sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
  • image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
  • src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

现在一般在使用的方法有一下几种:

1. CSS 方法

.pngs {
  height: 90px;width: 90px;
  background-image:url(icon_home.png)!important; /* FF IE7 */
  background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
  _ background-image: none; /* IE6 */
}

在 HTML 如下调用:

<div class="pngs"></div>

这种方法的优点就是使用简单方便,但是不能作为背景,且只能用作单个png图片的使用。如果要作为背景,需要新增加一个div层,并设置其position:relative;

.png div{position:relative;}

<div class='png'>
  <div>CSS 背景PNG透明 及 链接失效问题解决</div>
</div>

这种方法可以使用在那些png图片不多,且不需要repeat的情况下。

2.JS 方法

<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
j = j-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>

JS

这种js先判断是否IE,然后判断ie版本,版本在6.0下则判定函数,给png的图片添加滤镜。

使用起来的确方便,无论多少图片都可以解决,但是依然无法repeat。

3. htc方法

htc 相当于完全通过插件的方法修复的 IE6 的 bug,功能强大,支持 repeat,背景等功能,使用起来也很方便。 使用一个iepngfix.htc 文件,和一个透明的 gif 文件。

<!–[if lte IE 6]>
<style>.png{behavior:url("jscss/iepngfix.htc");}</style> //在这里可以加入其他用到png图片的id或者class
<script type="text/javascript" src="jscss/iepngfix_tilebg.js"></script>
<![endif]–>

ps:如果需要 repeat 背景,往往需要设置这个 div 宽度为100%。

总结这几种方法,第三种方法是最简单使用,且容易推广的方法,建议可以做个公共的地址,有产品需要,只需要应用这个公共地址就行了。

下载iepngfix_tilebg.js

转载自:http://www.nowamagic.net/javascript/js_PngInIE6.php

PNG透明兼容IE6的几种方法(转)的更多相关文章

  1. PNG透明兼容IE6的几种方法

    方法一:css方式,写一个属性hack,使用滤镜来解决png在ie6下不兼容的问题. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoad ...

  2. 设置IE兼容模式的几种方法

    一.指定文件兼容性模式要为你的网页指定文件模式,需要在你的网页中使用meta元素放入x-ua-compatible http-equiv 标头.1. 强制ie8使用ie8模式来解析,而且那个兼容性视图 ...

  3. PNG兼容IE6解决方法

    虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p> E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法 ...

  4. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

  6. 解决IE6中 PNG图片透明的终极方案-八种方案!

    “珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果, ...

  7. 兼容ie浏览器的placeholder的几种方法

    项目中遇到的问题,试了几种方法,今天整理出来,如果有不合适的地方,希望大家多多提意见. 第一种方法是:使用html新增的属性 “data-”来实现的,实现的时候,input框没有使用placehole ...

  8. 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

    阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...

  9. PNG24图片兼容IE6解决的方法

    非常多人都遇到一个问题:那就是PNG不能正常显示,比方: 网上试过的非常多办法都非常难实现.要嘛就是效果不好,那如今最好的办法就是直接调用JS插件,解决! 点击下载 如今说一下怎么用这个文件吧! 首先 ...

随机推荐

  1. mysql-5.7 innodb 的并行任务调度详解

    一.innodb并行任务调度是什么: 这里要“考古”一下了,不然问题说不清楚.上大学的时候老师和我们说最初的计算机只有一个核心,并且一次也只能做一件事, 如果你有两件事要用到计算机,在第一件事没有做完 ...

  2. 权限管理系统(一):权限系统与RBAC模型概述

    RBAC模型概述 RBAC即角色访问控制(Role Based Access Control) RBAC认为权限授权实际上是Who.What.How的问题.在RBAC模型中,who.what.how构 ...

  3. JavaScript经常使用对象

    常见的几种对象及其属性和使用方法: (1).Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); ...

  4. 树形列表 jqtree数据 使用

    jqtree调试笔记 用的是data-url的方式从远程加载的数据返回的数据格式须要是json,当然也可以使用text模式,但是恐怕要自己写格式的解析了 其中返回数据的时候,是在这个函数的末尾_loa ...

  5. MySQL的使用笔记

    @Reference Manual (以下简称REF-M) 在官网,选择MySQL Server,选择Documentation,就可以下载了,建议下载PDF 注意版本要对应 很重要,需要的时候就go ...

  6. 十倍交叉验证 10-fold cross-validation

          10-fold cross-validation,用来测试算法准确性.是常用的测试方法.将数据集分成十份,轮流将其中9份作为训练数据,1份作为测试数据,进行试验.每次试验都会得出相应的正确 ...

  7. sqlserver 关于子查询的优化操作

    在对条件需要用到子查询的时候,通常可以通过连接来代替子查询来完成操作,更加高效 SELECT t1.id,t2.columnName,t2.columnType,t1.rownum,t1.cellVa ...

  8. 修改IIS下默认的ASP.NET版本。

    已经安装net2.0 和3.5 ,但IIS里面却只有1.1 开始→运行→CMD C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis. ...

  9. 利用IT++搭建通信仿真平台

    IT++ is a C++ library of mathematical, signal processing and communication classes and functions.也就是 ...

  10. SCR文件的关联被AutoCAD所取代的解决办法

    SCR文件的关联被AutoCAD所取代的解决办法 --------转载自:http://hi.baidu.com/ygq366/item/45dceee3df47d2b52e140be9 SCR文件的 ...