Использование URL в CSS-переменных с Edge Browser - PullRequest
Новая
       4

Использование URL в CSS-переменных с Edge Browser

0 голосов
/ 05 ноября 2019

Пример: https://github.com/rikrak/EdgeUrlVar

Мы пытаемся улучшить использование CSS, внедрив vars. Мы столкнулись с проблемой, из-за которой 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>

1 Ответ

1 голос
/ 06 ноября 2019

Если вы просто просматриваете страницу по локальному пути к файлу, логотип не может отображаться в IE и Edge. Но если вы опубликуете его как веб-сайт, он может хорошо работать в Edge и Chrome.

Кроме того, IE не поддерживает переменные CSS, вы можете добавить полифилл , чтобы он работал вIE. Вам просто нужно импортировать ie11CustomProperties.js на страницу, где вы используете переменные CSS. В этом случае мы можем добавить файл JavaScript в index.html и Accounts / index.html .

Я добавлю полифилл и опубликую веб-сайтв IIS , и он может хорошо работать во всех браузерах: приводит к IE , приводит к Edge .

-------------------------------------------------------------Редактировать------------------------------------------------------------------

Вы можете использовать корневой путь с «/», чтобы избежать этой проблемы. Пожалуйста, попробуйте изменить client.css на это: 

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