DD_belatedPNG.js插件在iframe框架下出现的问题【原创】

首先，还是介绍下这个插件。在IE6下会经常遇到PNG图片不透明的情况。解决这种问题，就可以使用DD_belatedPNG.js这个插件。原理就是这个js插件使用了微软的VML语言进行绘制。

使用方法如下：

1、下载插件。

2、页面中引用。
代码如下：

<script src="{{ asset('bundles/zmwjteacher/js/DD_belatedPNG.js') }}"></script>
        <!--[if IE 6]>
        <script type="text/javascript">
        DD_belatedPNG.fix('div,img');
        </script>
        <![endif]-->

括号里的就是你想要透明的选择器名称或是标签。

这样就可以解决IE6下PNG图片不透明的问题。但是又会出现另一个问题：

在使用iframe框架的时候，只要引用这个插件，框架里的页面就会出现空白。也不知道是什么原因，于是上网找了下原因。试了一下，解决了这个问题。

在插件里有这样一段代码：

giveLayout: function(a) {
        a.style.zoom = 1;
        if (a.currentStyle.position == "static") {
            a.style.position = "relative"
        }
    }

大概的问题就出现在这一段。只要position没有设置那么 DD_belatedPNG.JS 就会把position设置为relative；于是就有了如下的修改方案：

giveLayout: function(a) {
    a.style.zoom = 1;
    if (a.currentStyle.position == "static") {
    	var tags=a.nodeName.toLowerCase();
    	if(tags!='html' && tags!='a'&& tags!='img'){
      		a.style.position = "relative"
      	};
    }
  }

大概就是加了判断，去除了一些标签。具体的原理就不是很清楚啦，有兴趣的可以深入了解一下。

虽然解决了这个问题，但是今早来又发现另一个问题。在IE6下a标签不能点击了。我还在纳闷为什么，后来在想会不会是因为修改了这个js。

于是把这一段中的“tags!=’a’”这一句删掉，a标签就可以点击了。

所以以后修改代码的时候还是要注意呀，不是拷贝过来就可以。