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文件，并且所有相关路径都是从代理脚本解析而不是真实位置。

最简单的解决方法是让我们更改代理脚本以输出@import其他CSS文件的假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");
}

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

1 个答案: