为什么我重复的 PNG 背景图片在 IE7 或 IE8 中不显示？答案

【问题标题】：Why does my repeated PNG background image not show in IE7 or IE8?为什么我重复的 PNG 背景图片在 IE7 或 IE8 中不显示？
【发布时间】：2013-08-21 09:32:14
【问题描述】：

我正在尝试将 PSD 转换为 HTML，但遇到了问题。我的网站可以在除 IE8 和 IE7 之外的所有主流浏览器中运行。 IE8 和 IE7 不显示背景。

背景是一个PNG图像，它是重复的。我知道非重复图像的方式，但对于重复图像我需要做什么？这是我使用的 CSS：

#footer-top {
    padding: 20px 0;
    background: url('img/footer-bg.png')repeat;
    width:100%;
    overflow:hidden;
    margin-top: 38px;
}

【问题讨论】：

请仔细阅读问题
请包含您用于背景图片的 css 部分。
问题是在 IE7/IE8 上没有显示背景图像，而在其他浏览器中重复显示（应该如此）？

标签： html css internet-explorer-8 internet-explorer-7

【解决方案1】：

见博文PNG background-repeat bug in Internet Explorer 7 and 8

上面写着：

显然 Internet Explorer 7 和 8 还没有完全正确地处理 PNG。在处理我当前的一个项目时，我偶然发现了一个重复 PNG 背景图像的错误。

对于这个项目，我有一个包含多个容器元素的页面模板，这些元素都有一个 1 x 1 像素的 PNG 背景设置为重复，并且在 IE 7 和 IE 8 中测试它时看起来很棒。所以，我创建了我的具有相同样式的下一页模板。这一次，IE 7 和 8 在处理后台重复时都卡住了。这两个浏览器都没有重复，而是莫名其妙地试图在整个容器中拉伸 1×1 图像。 PNG 恰好有 60% 的 alpha 透明度，但我不确定这是否重要。一位同事建议将其改为 10×10 像素的图像，只是为了看看会发生什么。惊喜，惊喜。这样就解决了。

我进行了更多搜索，看看是否有其他人遇到过这个问题并找到了这篇最近的博客文章。作者还发现这个 bug 似乎是随机出现的，一张 4×4 像素的图像解决了他的问题。由于 10×10 和 1×1 之间的文件大小差异不大，我将坚持使用 10×10。但我同意他的观点，这个bug创造了一个很酷的效果，如果可以随意复制就很棒了。

【讨论】：

【解决方案2】：

repeat 之前可能需要一个空格？

background: url('img/footer-bg.png') repeat;

（我没有方便的 IE7 或 8 来检查这个。）

【讨论】：

【解决方案3】：

亲爱的，我找到了最简单的方法。试试看吧

background-image:url(images/back-bg.jpg) !important;
background-repeat:repeat !important;
background-color:#fff !important;
background-position:left !important;

【讨论】：

!important 不是解决任何问题的正确方法。它表明您有一些其他样式可以覆盖您向我们展示的样式。尝试使用 Internet Explorer 的开发者工具进行检查。