您现在的位置:龙卷风首页 ›› 网络编程 ›› 阅读文章

ie6 png 透明

ie6 png 透明

superfish是一款很不错的下来菜单,基于jquery+css,配置也很简单。然而它有一个箭头的图标,设置却很巧妙,巧妙到你要修改的话,可能要费一点点功夫才行。

箭头的图标是png格式的,并且4in1,四种不同的图标并在同一个png图片中。在superfish中,它处理了ie6的问题,但是如果换成你自己定义的图标的话,似乎就不会处理了。我们在改图标的时候,效果总是差别很大。后来没办法了,另外找了一个让ie6兼容png格式图片的方法。

下面文字是引用:

做Web开发的朋友一定都知道PNG是一个相当不错的图片格式,但是这个好的格式却在IE6时代造成了麻烦,IE6会使透明的PNG的透明部分出现#DBEAED的色彩。透明不了。使得在FF下开发表现很好的界面换成IE浏览就惨不忍睹,又逼着换成GIF,而GIF的假透明在变换背景时造成毛边现象。

 刚去了www.gowindowslive.com去生成一个WLM的联系方式图标,结果发现的官方的解决方案。;)

核心函数贴出来供分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
/* 
Correctly handle PNG transparency in Win IE 5.5 & 6. 
Copyright 2007 Ignia, LLC 
Based in part on code from from http://homepage.ntlworld.com/bobosola. 
 
Use in  with DEFER keyword wrapped in conditional comments: 
 
 
 
*/ 
 
function fixPng() { 
  var arVersion = navigator.appVersion.split("MSIE") 
  var version = parseFloat(arVersion[1]) 
 
  if ((version >= 5.5 && version < 7.0) && (document.body.filters)) { 
    for(var i=0; i<document.images.length;>document.images.length;>      var img = document.images[i]; 
      var imgName = img.src.toUpperCase(); 
      if (imgName.indexOf(".PNG") &gt; 0) { 
        var width = img.width; 
        var height = img.height; 
        var sizingMethod = (img.className.toLowerCase().indexOf("scale") &gt;= 0)? "scale" : "image"; 
        img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')"; 
        img.src="images/blank.gif" mce_src="images/blank.gif"; 
        img.width = width; 
        img.height = height; 

                
作者 不见不散 本文仅代表作者观点,与龙卷风资讯网立场无关。

我来说两句

内容/Content