Question

我在IE6上遇到png图像问题并尝试搜索每个地方但没有成功。我用这个css代码显示png图像。有什么问题。请现在让我。

.bottom-box {
    width: 210px;
    float: left;
    margin:5px;
    position:relative;
    padding: 5px;
    text-align:left;
    height: 150px;
    min-height: 150px;
    background-image: url(/images/trans-box.png);
    color: #FFF;
    line-height: 20px;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/trans-box.png', sizingMethod='scale');
}

谢谢！提前。

Answer 1

IE6讨厌png，这是一个令人遗憾的事实......但你应该尝试使用条件评论而不是下划线黑客...编辑你的CSS：

.bottom-box {
    width: 210px;
    float: left;
    margin:5px;
    position:relative;
    padding: 5px;
    text-align:left;
    height: 150px;
    min-height: 150px;
    background-image: url(/images/trans-box.png);
    color: #FFF;
    line-height: 20px;
}

然后在HTML的HEAD中添加：

<!--[if lte IE 6]>
<style>
.bottom-box{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
sizingMethod='scale');
}
</style>
<![endif]-->

或者您可以使用GIF或仅用于ie6的东西，使用黑客/条件评论。 filter:属性是IE特定的BTW。

您还可以尝试星级黑客，而不是条件，编辑您的CSS，但添加此规则：

* html .bottom-box{
    background-image: none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
    sizingMethod='scale');
}

因为它在技术上是有效的CSS，它可能会更好。

知道IE6＆amp;此PNG修复不适用于background-position或background-repeat。它不会将PNG平铺为背景，所以我再次建议使用gif或IE6的东西。

Answer 2

IE6不直接支持PNG透明度，但您可以通过CSS过滤器进行破解。但是，幸运的是，没有必要自己做。 http://www.twinhelix.com/css/iepngfix/提供了一个自动（非常好）的修复程序。安装很简单，可以动态地将相应的directX过滤器命令添加到页面中的任何PNG图像。

唯一的缺点是，由于此修复程序适用于加载dom之后，将会有一段短暂的时间可见PNG不透明，因此在事情开始按预期显示之前会有一个短暂的丑陋。< / p>

IE 6背景中的png图像问题

2 个答案: