Firefox 3.x 中的 PNG 背景图像消失且无法加载

Question

问题是这样的：

我有一个 div (#bottom)，它不是浮动的，它在 CSS 中有一个预定义的高度（24 像素；），它用于显示它的背景（bottom.png），直到我把东西放进去。

CSS:

#bottom {height: 24px; background-image: url("bottom.png");}

HTML: 

<div id="bottom">
<div id="somethingInside">
</div>
</div>

现在 FF 3.x 不加载背景图片了！我可以将另一个图像放在同一个页面上，在同一个 html 文件中，并让 CSS 将其用作该 #bottom div 的背景图像，然后它会显示在那里。

但是，即使我在 FF 上下文菜单中单击“显示背景图像”或输入 bottom.png 路径，我也无法在浏览器中加载图像。相反，只有底部.png 文件的路径显示在那里......如果我使用 gif 文件，那么一切正常。当我使用 PNG 时，它不起作用。

如果我将bottom.png 重命名为whatever.png，它也不会加载。如果我在同一文件中的其他任何地方调用 bottom.png 作为背景，它就不起作用。

如果我从 div#bottom 中删除 div#somethinginside，问题仍然存在。

在我将bottom.png作为<img src="bottom.png" />包含到div#bottom中后，一切都变了，然后背景返回，显示了，但我在文件下面使用的其他一些png消失了。

这是迄今为止我遇到过的最烦人的现象，因为我找不到任何解释。看起来好像 Firefox 将该文件列入了黑名单，但听起来可能很愚蠢。

这不是路径问题：我在同一个文件夹中有很多文件。 它不是 CSS 问题中 url("myUrl") 中的“/”：我复制/粘贴有效文件的路径。 我总是在 Photoshop 中通过 Save for web 进行保存。无论我使用的是 PNG 8 和 PNG 24 图像，都会发生同样的情况。 我正在使用本地服务器 XAMPP。 我正在使用 Joomla。和 Windows XP 专业版。它只发生在 Firefox 中，目前对我来说是 3.5.7。在 IE8 中不是问题。

有人遇到过这样的问题吗？我什至无法按需复制它，因为我什至不知道是什么导致了这种奇怪的行为。由于某种原因，它主要适用于 PNG 文件。这是第二次发生这种情况，这是一个完全不同的项目。是否存在一些 PNG/Firefox 错误？

Answer 1

使用 Firefox 很简单，只需使用 firebug 看看发生了什么。

顺便问一下，你在 Firefox 的安全模式下试过了吗？也许这是一个引起麻烦的附加组件。

它适用于哪些浏览器（和版本）？