CSS 有时会加载相对于页面的 URL

Question

我在 MDN 上看到相对 URL 是相对于 css 文件的，而不是相对于当前页面的。 我想了解在 CSS 中使用相对 url 是否存在任何异常或陷阱，正如我在访问日志中看到的，某些请求使用了错误的相对路径。

这里之前的线程表明旧的 IE 版本可能存在问题，但这似乎不是造成此问题的原因，因为这里的用户代理是现代的。

特别烦人的是，这并不影响所有请求，而且我自己无法重现该问题。我可以将 css 中的所有相对网址替换为绝对网址并继续我的生活，但我想了解导致此问题的原因并发现是否有更好的解决方案。

CSS 文件像

<link rel="stylesheet" type="text/css" href="/static/css/common.min.css?v6" />

一样加载，在此 我有定义的图像的相对网址，例如

#go, #search_go {background: #EEE url(../img/silk/magnifier.png) no-repeat .4em .25em; padding-left: 1.8em;}

使用 UglifyCSS 缩小了 CSS，但在浏览器中使用 Inspect 元素让我认为这不是问题（当然，它确实适用于大多数请求）。

错误请求的示例如下所示

ip.ip.ip.ip - - [09/Jan/2022:20:22:20 +0000] "GET /foo/img/silk/magnifier.png HTTP/2.0" 404 1575 "https://example.com/foo/search/" "Mozilla/5.0 (Android 11; Mobile; rv:95.0) Gecko/95.0 Firefox/95.0"

“好”请求的示例如下所示

ip.ip.ip.ip - - [09/Jan/2022:21:07:32 +0000] "GET /static/img/silk/magnifier.png HTTP/2.0" 200 615 "https://example.com/foo/search/" "Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Mobile/15E148 Safari/604.1"

请注意，这不仅仅影响单个浏览器，访问日志中显示的带有“错误”请求的其他一些用户代理是

"Mozilla/5.0 (Android 11; Mobile; rv:95.0) Gecko/95.0 Firefox/95.0"
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:95.0) Gecko/20100101 Firefox/95.0"
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"```

Answer 1

CSS 中的相对 URL 始终应该与 CSS 文件本身相关，而不是与它可能链接的任何页面相关。目前我发现的唯一例外是由于某些用户浏览器中安装的 DarkReader 扩展的影响。由于这个错误，它会解释相对于页面（而不是 CSS 文件）的 URL，因为它会预加载要变暗的嵌入图形。