gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:45:53 25 4
gpt4 key购买 nike

示例:https://github.com/rikrak/EdgeUrlVar

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

结构:

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

客户端.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>

最佳答案

如果只是通过本地文件路径浏览页面,则logo在IE和Edge中无法显示。但如果您将其发布为网站,它可以在 Edge 和 Chrome 中正常运行。

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

我添加了 polyfill 和 publish the website to IIS它可以在所有浏览器中正常工作:result in IE , result in Edge .

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

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

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

关于html - 在 Edge 浏览器中使用 CSS 变量中的 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58716220/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com