问题

最近给自己的 Hexo + Butterfly 博客加了一张背景图片。

奇怪的是，背景图片并不是所有浏览器都正常。

目前测试下来：

  • Chrome：正常
  • 手机 Firefox：正常
  • 桌面版 Firefox：不显示

也就是说，图片本身大概率没有损坏，问题更可能出现在桌面版 Firefox 对页面 CSS、图片资源或者缓存的处理上。

开始排查

遇到这种问题，第一反应不是马上修改配置，而是先确认图片到底有没有成功加载。

打开 Firefox 的开发者工具：

F12 → 网络（Network）

然后刷新页面。

搜索图片文件的扩展名，例如：

1
2
3
jpg
png
webp

查看背景图片对应的请求状态。

如果出现：

1
2
3
4
404
403
Blocked
CORS

就说明图片资源本身没有正常加载。

如果请求返回 200，则说明 Firefox 已经成功获取图片，需要继续检查 CSS。

检查 CSS

Butterfly 的背景图最终会通过 CSS 设置，例如：

1
2
3
body {
    background-image: url(...);
}

可以使用 Firefox 的开发者工具检查 body 或对应元素。

如果 background-image 被划掉，或者最终计算出来的样式中没有背景图片，就需要继续检查 CSS 的优先级或者自定义 CSS。

直接打开图片

还可以把 CSS 中的图片 URL 复制出来，直接粘贴到 Firefox 地址栏。

如果图片能够直接打开：

图片 URL → Firefox 中正常显示

那么图片服务器和图片文件本身基本没问题。

这时就应该重点检查 CSS。

如果直接打开也无法显示，就应该检查图片格式、响应头、URL 或服务器配置。

后续

通过上面各种检查后发现应该不是代码问题，那就只能来看看插件了，因为我手机版的 Firefox 和电脑版装的插件差不多，所以一开始就没往这方面想。

最后通过关闭拦截追踪器的插件并强制刷新网页后确定了具体原因。

对于这种浏览器兼容问题，最重要的不是不断修改 CSS，而是先找到浏览器实际报出的错误。

毕竟：

1
2
3
4
5
6
7
8
9
10
11
看到问题
    ↓
找到请求
    ↓
确认资源是否加载
    ↓
检查 CSS
    ↓
查看 Console
    ↓
定位真正原因

比盲目修改配置有效得多。

这也是我折腾自己的博客时遇到的一个小问题。