对于大多数网站设计而言，便携式网络图形（PNG）是最理想的图像格式。但旧版不兼容的 Internet Explorer 浏览器（IE）无法很好地处理这种可扩展文件格式的强大透明功能，使得跨浏览器兼容性设计变得困难。
得益于 Unit Interactive 提供的优秀脚本，你几乎可以克服 IE6 在 PNG 方面的弱点，并在设计的许多方面使用强大的 PNG，而无需牺牲跨浏览器兼容性。
Unit Interactive PNG 修复方案
在本期“网页设计技巧”中，我将提供一些关于 PNG 格式的信息，尝试解释它为何优于其他网页格式，并快速展示我所见过的最有效的 IE6 补偿 PNG 修复方案的实施方法。
赞美 PNG
作为互联网标准机构的万维网联盟（W3C）于 1996 年首次将 PNG 确定为首选的网络图形格式，随后在 2003 年 11 月通过一份名为 “Portable Network Graphics (PNG): Functional Specification” 的详细摘要再次强调了 PNG 的强大功能。
PNG 最初被选用来替代 GIF 文件格式，它为网络图形提供了一种无损、便携且高度压缩的解决方案，其图像还原能力远胜于 GIF 格式。（维基百科对 “lossy” versus “lossless” compression 有较好的解释，简而言之，“有损”图像会丢失原始像素特征，而“无损”图像则保留这些特征。）PNG 文件通常比其他网络图像格式更小，尽管高分辨率的 JPG 文件有时能以更小的体积提供相似的质量——但不幸的是，JPG 无法包含透明效果。
最后，PNG 最出色的特性在于其卓越的透明度管理能力，能够实现 GIF 或 JPG 无法实现的精美分层设计。
PNG 优于 GIF
- 无损格式
- 更高的图像质量
- 更好的透明度支持
- 通常文件体积更小
PNG 优于 JPG 的优势
- 无损格式
- 透明度支持
但 IE6 表现糟糕
在不兼容的 IE6 浏览器中，PNG 出色的透明效果会被渲染成单调的灰色。因此，原本外观精美、易于叠加的图片突然变成了中间带有一张图片的灰色方块。不幸的是，IE6 对 PNG 渲染存在缺陷，加之其相对较高的普及率（约占美国互联网用户的 20%），使得使用 PNG 格式进行设计变得颇具挑战。在过去的几年里，出现了数十种针对 IE6 PNG 问题的 JavaScript 解决方案，我本人也尝试过其中大约 50 种。微软甚至提供了自己的 JavaScript 解决方案。
实现 Unit Interactive PNG Fix
我喜欢 Unit Interactive PNG Fix 的原因之一是它是自动化的。一旦将 JavaScript 文件和一张透明 GIF 文件放入网站的目录中，只需调用该脚本即可完成设置。
- 第 1 步： 从 Unit Interactive 下载 Unit PNG Fix。很简单。
- 第 2 步： 将 unitpngfix.js 文件和 clear.gif 放置在你的网站目录中。unitpngfix.js 文件最好放在你的脚本文件夹中，而 clear.gif 文件应放在相对根目录下。
- 第 3 步： 将针对 IE 的代码添加到 网页的 部分。代码如下。
<!--[if lt IE 7]> <script type="text/javascript" src="URL FOR unitpngfix.js"></script> <![endif]-->
资源
- The Unit Interactive PNG Fix
- 万维网联盟的 “Portable Network Graphics (PNG): Functional Specification. ISO/IEC 15948:2003 (E).”
- Microsoft 针对 PNG 和 Internet Explorer 的解决方案