css - 重定向 CSS 文件中的相对路径

Question

我知道 CSS 中的相对路径应该基于 CSS 文件的位置，正如 Using relative URL in CSS file, what location is it relative to? 所回答的那样和 Is a relative path in a CSS file relative to the CSS file? .

但是，我有一个内容管理网站，我允许在需要时覆盖 CSS。我在 head 中为页面的所有部分生成链接，格式如下:

<link rel="stylesheet" type="text/css" href="/content/data/?s=123&get=.css">

如果显示的部分使用默认的静态 CSS 文件，则服务于 /content/data/ 的页面会检测到该事实；在这种情况下，它会重定向到该静态文件。

这些静态 CSS 文件可能包含存储在附近文件夹中的图像的相对路径，因此当我的 CSS 文件位于 /some-folder/styles/file.css 并且它包含

body { background-image: url(../images/section-123-bg.png); }

浏览器查找 /some-folder/images/section-123-bg.png。

这在 Chrome、Safari 或 Firefox 中似乎不是问题。然而，IE 似乎在寻找 /content/images/section-123-bg.png。它似乎将 /content/data/ 视为它最终的 CSS 文件的基本路径。

我的问题是:

在计算 CSS 文件中的相对路径时，浏览器应该从哪个源路径开始？

• CSS 文件的最终 源路径 - 在任何重定向之后(如 Webkit/Mozilla)或
• 来自链接元素 href 的初始源路径(如 Internet Explorer)

Answer 1

我有一个类似的问题 - 我们必须为遗留应用程序代理 CSS 文件，并且所有相对路径都是从代理脚本解析的，而不是真实位置。

对我们来说，最简单的修复方法是更改​​代理脚本以输出一个伪造的 CSS 文件，该文件是 @import 另一个 CSS 文件。

public ActionResult Bundle(string type, string bundle)
{
    var url = Scripts.Url(bundle).ToString();
    var cssContent = string.Format("@import url('{0}');", url.Replace("'", @"\'"));

    return Content(cssContent, "text/css");
}