在 Edge 浏览器中使用 CSS 变量中的 URL

Question

我们正在尝试通过实施变量来改进 CSS 的使用。我们遇到了一个问题，Chrome 和 Firefox 工作正常，但 Edge（和 IE11）似乎解释 CSS 中相对于页面的路径，而不是 css 文件。如果不求助于绝对路径，我找不到解决这个问题的方法，我宁愿避免。

结构：

+-Accounts
|    +-index.html
+-Resources
|    +-ClientOne
|    |    +-css
|    |    |    +-client.css
|    |    +-images
|    |         +-logo.png
|    +-Shared
|         +-css
|              +-common.css
+index.html

client.css:

:root{
    --logo:url('../../../Resources/ClientOne/Images/logo.png');
}

common.css

.title{
    background-image: var(--logo);
    background-repeat: no-repeat;
    height: 80px;
}

index.html

<html>
    <head>
        <title>Demo of CSS vars</title>
        <link href="Resources/Shared/Css/common.css" rel="stylesheet" type="text/css" />
        <link href="Resources/ClientOne/Css/client.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="title"></div>
        <h2>Home Page</h2>
        <p>Go to <a href="Accounts/index.html">Accounts</a></p>
    </body>
</html>

Accounts/index.html（两者相似）

<html>
    <head>
        <title>Demo of CSS vars</title>
        <link href="../Resources/Shared/Css/common.css" rel="stylesheet" type="text/css" />
        <link href="../Resources/ClientOne/Css/client.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="title"></div>
        <h2>Accounts Page</h2>
        <p>Go <a href="../index.html">Home</a></p>
    </body>
</html>

Answer 1

如果只是通过本地文件路径浏览页面，则logo在IE和Edge中无法显示。但是如果你把它发布为网站，它可以很好地在 Edge 和 Chrome.

中运行

此外，IE 不支持 CSS 变量，您可以 add a polyfill 使其在 IE 中工作。您只需要将 ie11CustomProperties.js 导入到您使用 CSS 变量的页面中。在这种情况下，我们可以将 JavaScript 文件添加到 index.html 和 Accounts/index.html.

我添加了 polyfill 和 publish the website to IIS and it can work well in all browsers: result in IE, result in Edge。

-------------------------------------------- - - - - - - - - 编辑 - - - - - - - - - - - - - - - - - --------------------------------

您可以使用带“/”的根相对路径来避免此问题。请尝试将 client.css 更改为：

:root{
    --logo:url('/Resources/ClientOne/Images/logo.png');
}

在 Edge 浏览器中使用 CSS 变量中的 URL

Use of URLs in CSS vars with Edge Browser

html

css

microsoft-edge