IE6 PNG-transparency CSS hack不起作用答案

【问题标题】：IE6 PNG-transparency CSS hack not workingIE6 PNG-transparency CSS hack不起作用
【发布时间】：2010-05-26 17:37:13
【问题描述】：

我环顾四周，决定使用 CSS 方法，而不是依赖 JS……我认为那些坚持使用 IE6 的企业用户也可能会被 IT 部门禁用 JS。

所以在我的 HTML 中我有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
</head>

<body>
    <img src="media/logo.png"/>
</body>

那么我的 ie6.css 只包含：

img
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

然而，这些都没有丝毫区别，没有透明度。我注释掉了页面的所有其余部分，所以它确实是那个，但仍然没有运气。我删除了 default.css 样式表，仍然没有区别。

编辑：我现在让它工作，使用 .htc 方法，将该文件加载到条件 IE6 测试块中。原来我遇到的问题是 Windows 7 已经“锁定”了文件（我什至不知道这是什么意思），这阻止了 IE 加载/使用它。

【问题讨论】：

标签： css png internet-explorer-6

【解决方案1】：

如果我没记错的话，你一定要用

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png')

对于每一个图像，你不能让它只适用于所有图像。

【讨论】：

你是对的 - 只有 javascript 选项给你“我们会处理一切”..
d'oh，我只是复制粘贴没有理解！
如何将其应用于内嵌图像？

【解决方案2】：

我正在使用以下页面的解决方案：IE PNG support
跟着在线演示online demonstration一步一步，你的pngs在IE中也是透明的。

【讨论】：

我不明白。他的演示适用于我的 IE6 虚拟机，但是当我复制粘贴时，我的页面没有。我看不出有什么问题:(
我已将图像移至与 HTML 相同的级别。并复制所有文件。它仍然不起作用。我将我的图像放在他的测试中，它确实有效。我将他的自检代码复制到我的页面中，单击链接时出现页面错误：'IEPNGFix' 未定义。它还想从我这里得到什么？！！
哦，现在可以了。看看我的更新......不知道那是什么！

【解决方案3】：

在 HTML 页面中，您有相对于 HTML 文件 (media/logo.png) 的图像路径，在 default.css 中有一个带有 behavior: url(iepngfix.htc); 的条目（iepngfix.htc 的路径是相对于 HTML 文件) 并且在ie6.css 中有一个带有filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media/logo.png', sizingMethod='scale'); 的条目，其中包含相对于CSS 文件的图像路径。而且至少你需要更改iepngfix.htc中的路径（IEPNGFix.blankImg = 'media/blank.gif';）

您需要具有以下文件夹结构：

HTML 文件
iepngfix.htc
ie6.css
default.css
/media/logo.png
/media/blank.gif

【讨论】：

您混淆了两种方法。 DXImageTransform 不与 HTC 一起使用。但无论如何，我有空白.gif 作为 HTML 的兄弟，而不是在媒体文件夹中。是否有任何理由空白和 .png 需要位于同一位置，因为除此之外我的路径设置正确。
显示文件及其路径的设置只是一个可能的场景。在我的应用程序中，文件夹结构更加复杂。只是想展示一个简单的测试配置；）

【解决方案4】：

你可能想看看http://www.dillerdesign.com/experiment/DD_belatedPNG/

它还允许您使用带有 CSS background-position 属性的 alpha 通道的 png，而在使用 AlphaImageLoader 时通常不能这样做。

【讨论】：