12

我们（心爱的）设计师不断创建具有透明背景的 PNG 文件，以便在我们的应用程序中使用。我想确保 PNG 的此功能也适用于“旧”浏览器。最好的解决方案是什么？

下面的编辑

@mabwi & @syd - 我是否同意使用 PNG 不是重点。这是我需要解决的问题！

@Tim Sullivan - IE7.js 看起来很酷，但我认为我不想介绍应用程序的所有其他更改。我想要一个专门解决 PNG 问题的解决方案。感谢您的链接。

4

11 回答 11

5

我在这里找到了一个非常好的解决方案：Unit Interactive -> Labs -> Unit PNG Fix

更新Unit PNG 也出现在 NETTUTS 上的 PNG 修复选项列表中

以下是他们网站上的亮点：

  • 非常紧凑的 javascript：不到 1kb！
  • 修复了一些由 IE 的 filter 属性引起的交互问题。
  • 适用于 img 对象和背景图像属性。
  • 自动运行。您不必定义类或调用函数。
  • 允许自动宽度和自动高度元素。
  • 部署超级简单。
于 2008-08-13T20:39:54.803 回答
5

还存在具有完全 alpha 透明度的调色板 8 位 PNG ，这与 Photoshop 和 GIMP 可能让你相信的相反，它们在 IE6 中的降级更好——它只是将透明度降低到 1 位。使用pngquant从 24 位 PNG 生成此类文件。

于 2009-01-26T14:08:03.403 回答
2

在 IE6 中使用 PNG 几乎不比任何其他浏览器更难。您可以在没有 Javascript 的情况下在您的 CSS 中支持所有这些。我以前看过这个黑客...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

我不太确定这是有效的 CSS，但根据站点的不同，它可能并不重要。

（值得注意的是，第一张图片的 URL 是基于样式表的目录，而第二张图片的 URL 是基于正在查看的页面的目录 - 因此它们不匹配）

于 2008-09-18T13:29:34.007 回答
2

@Hboss

如果您确切地知道要显示的所有文件（以及每个文件的尺寸），那就太好了——维护那个 CSS 文件会很痛苦，但我想这是可能的。当您想出于某些非常常见的目的开始使用透明 PNG 时：a) 附带的图形，例如适用于任何背景的图标（可能大小不同），以及 b) 重复背景；那你就完蛋了。我尝试过的每个解决方法都在某个时候遇到了障碍（当背景透明时无法选择文本，有时图像以古怪的尺寸显示等等），我发现为了获得最大的可靠性，我'将不得不恢复为 gif。

我的建议是尝试一下 PNG 透明度，但同时要意识到它绝对不是完美的——请记住，对于 7 岁以上浏览器的用户，您正在向后弯腰。这些天我所做的是在 IE6 用户第一次访问该网站时弹出一个窗口，并友好地提醒他们的浏览器已经过时并且不提供现代网站所需的功能，尽管我们会尽力给您最好的，如果您升级得很好，您将从我们的网站和整个互联网获得更好的体验。

于 2008-09-18T13:56:00.183 回答
2

IE7.js将在 IE6 中提供对 PNG（包括透明度）的支持。

于 2008-08-13T19:12:56.477 回答
2

我一直在尝试用 .pngs 创建一个网站，但这并不值得。网站变慢了，而且你使用了不能 100% 工作的黑客。这是一篇关于一些选项的好文章，但我的建议是找到一种方法让 gif 工作，直到你不必支持 IE6。或者只是给 IE6 一个降级的体验。

于 2008-08-13T23:31:12.307 回答
0

我相信所有浏览器都支持 PNG-8。它不是 alpha 混合的，但它确实具有透明背景。

于 2008-08-13T19:34:04.093 回答
0

我可能弄错了，但我很确定 IE6 和更少的只是不使用 PNG 文件做透明度。

你有点是，你有点不是。

IE6 本身不支持它们。

然而，IE 支持疯狂的自定义 javascript/css 和 COM 对象（这是他们最初实现 XmlHttpRequest 的方式）

所有这些黑客基本上都是这样做的：

  • 找到所有的 png 图像
  • 使用 directx 图像过滤器加载它们并以 IE 理解的某种格式生成透明图像
  • 用过滤后的副本替换图像。
于 2008-08-13T23:11:57.807 回答
0

要考虑的一件事是电子邮件客户端。您经常需要 PNG-24 透明度，但在 Outlook 2003 中使用的是使用 IE6 的机器。电子邮件客户端不允许使用 CSS 或 JS 技巧。

这是处理该问题的好方法。 http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

于 2009-02-24T23:24:49.570 回答
0

如果您从 Fireworks 将图像导出为 PNG-8，那么它们的作用与 gif 图像相同。所以它们不会看起来很糟糕和灰色，透明度将是透明的，但它们不会像其他浏览器那样具有完整的 24 位可爱。

可能无法完全解决您的问题，但至少您可以部分解决问题，只需将它们重新导出即可。

于 2009-04-08T14:31:22.390 回答
-1

我可能弄错了，但我很确定 IE6 和更少的只是不使用 PNG 文件做透明度。

我有两个我使用的“解决方案”。要么创建具有透明度的 GIF 文件并在任何地方使用它们，要么只将它们用于 IE 6 和更早版本的条件样式表。第二个只有在您将它们用作背景等时才有效。

于 2008-08-13T19:12:49.910 回答