1

我有一个非常简单的 CSS 将背景图像应用于<li>元素

.icon-facebook { background: url("./images/icon_facebook.png") no-repeat; }

当我在本地查看它时效果很好，没有网络服务器，即通过双击 .html 文件。

但是一旦我通过 Apache 提供相同的页面 - 无论是在本地主机还是生产服务器上 - 背景图像都会消失。

  • 页面上的其他背景图像工作正常 - 并且都具有相同的（相对）路径。

  • 指定背景图像的绝对路径也不起作用。

  • 重命名文件不起作用。

  • 如果直接在浏览器中导航到，图像可以很好地显示。

  • 监视 Apache 的访问日志，浏览器甚至不会尝试请求图像 (!)，即使在 CSS 中提供了绝对 URL。

当我检查<li>Firebug 时说“无法加载给定的 URL”但是当我直接从 Firebug 中的 CSS 复制背景图像 URL 并将其粘贴到新选项卡中时 - 你猜怎么着？有用。

我<div>在同一页面上有一个来自同一文件夹的不同背景图像，效果很好。当我用我的“问题”文件之一替换它的文件名时，我注意到它不再显示了。

有问题的图像是 20x20px PNG（但我也尝试过 JPG）。

所有其他浏览器都可以正常工作。

这真的让我发疯。

4

2 回答 2

3

难以置信的。真是难以置信。

罪魁祸首是 Adblock Plus，我安装在 Firefox 上，但没有安装在任何其他浏览器上。它将背景图像的名称和/或类名解释为广告或社交媒体的烦恼，因此默默地阻止它们。

我之前已将我的生产域添加到其白名单中，但当它更改时我忘记更新它。

这就解释了为什么某些图像文件名有效（例如icon_f.png，而其他图像文件名 -icon_fb.png或icon_facebook.png- 没有）。

让这成为一个教训 - 不要在您的开发浏览器上运行任何类型的插件。

我已经准备好哭了……现在我想我会的。为我的愚蠢哭泣。

感谢大家的意见。

于 2013-09-29T04:17:41.027 回答
1

具体来说，罪魁祸首是Fanboy 的社交屏蔽列表，它是 Adblock Plus 中包含的过滤器订阅之一。过去已经给我造成了很大的困扰。

要禁用它，请单击 Adblock Plus 工具栏按钮并选择打开过滤器首选项。然后，您将找到订阅列表，您可以简单地取消订阅该列表。

在此处输入图像描述

这比完全禁用 Adblock Plus 要好，这样您就可以继续使用它来达到最初的目的：阻止广告。

于 2014-04-30T01:01:05.437 回答