css - IE 6 问题背景中的 png 图片

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，这是一个可悲的事实......但你应该尝试使用条件注释而不是下划线 hack......将你的 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 的东西，使用 hacks/条件注释。 filter: 属性是特定于 IE 的 BTW。

你也可以尝试 star hack，而不是条件，如上所述编辑你的 CSS，但添加这条规则:

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

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

此外，了解 IE6 和此 PNG 修复不适用于背景位置或背景重复可能很有用。它不会将 PNG 拼贴为背景，因此我再次建议使用 gif 或其他适用于 IE6 的东西。