Question

我有一个透明背景的png在IE 6中不起作用。我通过使用DIV替换少量img标签来解决问题，而在CSS中我使用：

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

我遇到的问题是我失去了alt和title属性，这使得网站无法访问。如果我将上面的CSS与img标签一起使用，我会看到正确的图像，但是当它无法显示图像时，它会显示IE上显示的大“X”。

有关如何通过在IMG标记中正确显示透明度来使IE表现出来的任何建议吗？

Answer 1

你可以继续使用DIV标签，但仍然可以访问的一种方法是在DIV元素中放置第二个SPAN标签，并将ALT的值放在其中，然后将其设置为不在页面外。例如......

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

然后HTML看起来像这样......

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

标题标签仍然适用于DIV，所以你应该对那部分没问题。

我认为你不能简单地隐藏文本（如display：none;），因为我认为屏幕阅读器会尊重该规则（如不读它）

Answer 2

您可以使用javascript在ie6中启用透明度。你可以找到很多例子。这是我用过的链接。

http://jquery.andreaseberhard.de/pngFix/

Answer 3

另一个选择是使用htc for ie6 - 请参阅此处获取解决方案：

http://www.twinhelix.com/css/iepngfix/

只需要在你的css文件中添加额外的一行 - 抱歉还是需要javascript - 不太确定。

Answer 4

几个月前，我使用了一个小的JavaScript工具来解决这个问题。它被命名为Unit PNG FIX，它非常易于使用。

Answer 5

虽然有人为此提供了JS实现，但此解决方案也将针对FF和其他浏览器执行。有更好的想法，例如使用MS技术：）

其中一个使用了一种名为HTC的东西（超文本组件，如果我没有误会的话）。这就像......行为的CSS。它实际上是一个XML文件，它允许您将一些函数附加到CSS选择器。同样，MS技术。

简而言之，请访问此网站： http://www.twinhelix.com/css/iepngfix/

我正在使用drupal模块，我很高兴。如果您想知道，这是模块：http://drupal.org/project/pngbehave

注意：这在IE测试人员下无效：http://www.my-debugbar.com/wiki/IETester/HomePage 我正在使用带有IE6的Windows 2000（在vmware下运行，如果你必须知道）来测试IE6网站。

Answer 6

IE6支持PNG-8透明度，但不支持PNG-24。我最喜欢的“修复”IE6的工具之一是IE8.js。

让透明PNG在img标签中的IE 6中工作

6 个答案: