Question

下面的代码有一个重复的背景图片“thinline.png”。最重要的是4层透明PNG：cardshadow.png，steel.png，startjobapplicationshadow.png和startapplication.png

我的目标是让这个代码在IE6中看起来不错，而不会弄乱其他浏览器。 IE的这个功能被广泛记录，但我无法让它工作。请给我一些想法或例子来帮助我解决这个问题。

感谢。麦克

守则：

  <div style="height: 333px; width: 100%; position: absolute; top: 68px; background-image:url(Resources/thinline.png); background-repeat:repeat-x; ">
<div style="position: absolute; height: 300px; width: 215px; top: 15px; right: 50%; margin-right: -390px; z-index: 2; ">
<img src="Resources/steel.png" style="position: absolute; top: 0px; z-index: 3;"/>
<img src="Resources/cardshadow.png" style="position: absolute; top: 0px; margin-top: -8px; margin-left: -10px; z-index: 2">
<img src="Resources/startjobapplication.png" style="margin-left: -65px; position: relative; top: 258px; left: 50%; z-index: 5; display: block;"/>
<img src="Resources/startjobapplicationshadow.png" style="margin-left: -67px; margin-top: -20px; position: relative; top: 258px; left: 50%; z-index: 4; display: block;"/>

Answer 1

看看Dean Edwards的IE7。它是Internet Explorer 6的一个javascript库，它使透明的png正常工作，以及修复css错误并添加对其他css功能的支持。我过去使用过这个库并取得了一定的成功（这比添加IE特定的css hacks更容易。）。但是，加载时页面可能会短暂看起来不正确。

Answer 2

使用Microsoft的AlphaImageLoader作为背景时出现问题。它们基本上不会重复。

有两种解决方案：

如果您的图像可以拉伸 - 那么在AlphaImageLoader中使用适当的设置： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/file.png', sizingMethod='scale')
如果您的图片无法拉伸，那么您应该使用IE PNG Fix v2.0 Alpha 3之类的JavaScript解决方案。请注意，它使用Microsoft的.HTC文件，必须将其发送到具有特定（text/x-component）元类型的浏览器，否则它将无效。

Answer 3

我没有对此进行测试，但您可以尝试this。将此类应用于适当的图像。

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

我没有可用的IE6副本，因此无法确保其有效。

我还发现this似乎解决了JS的问题。在阅读了一点之后，最后一个解决方案可能是处理它的最佳方法。

Answer 4

对于背景图片，如果您不在实际代码中使用内联样式，并且根据您的背景图片和可接受的质量损失，您可以将png保存为gif并使用

* html .divclass {background-image:url(Resources/thinline.gif);}

.divclass是div的类名或#id。

* html将覆盖ie6的背景图片。

Answer 5

使用DD_belatedPNG。

我应该如何在IE 6中使用透明png而不是背景重复？

5 个答案: