Почему Firefox не использует CSS из локального абсолютного пути?

У меня есть локальный HTML-файл со ссылкой на локальный CSS-файл. Оба файла находятся на компьютере A. HTML-код находится в одном месте, но CSS хранится в другом месте на компьютере A. HTML-файл представляет собой отчет, созданный программой, запущенной на компьютере A. Пользователь читает HTML-отчет на компьютере A.

HTML

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <title>My very first html document</title>
    <link rel = "stylesheet" type = "text/css" href = "C:\tmp\folder1\css\mystyle.css"  />
</head>
<body>
    <div class = "myclass" >Hello World!</div>
</body>
</html>

CSS mystyle.css

.myclass {
    background-color: yellow;
}

Структура папок такая:

C:
+
+->tmp
     +
     +>folder1
     |       +
     |       +>css
     |           +
     |           +>mystyle.css
     +>folder2
             +
             +>index.html

В Firefox CSS не применяется. Результаты из Firefox, Chrome, IE, Edge (по часовой стрелке). Почему Firefox не использует CSS из локального абсолютного пути?

Версия Firefox: 63.0.3 (64 бит)

Что я пробовал

  1. Относительный путь к CSS (href = "../ folder1 / css / mystyle.css"). Это работает.
  2. Косая черта изменена с косой черты на обратную, косые черты не используются. Это не сработало.

Я бы предпочел абсолютный путь для CSS. Я бы предпочел не копировать CSS.

Вопросы

  1. Может кто-нибудь объяснить, почему Firefox не применяет CSS?
  2. Как быстро решить эту проблему?
  3. Что нужно делать правильно?

Вероятно, связано с безопасностью. Быстрое исправление, вероятно, - это относительный путь, который вы уже указали сами или настроили веб-сервер (localhost) для запуска вашего сайта.

— Mark Baijens 10.12.2018 16:24
html css firefox
10.12.2018 16:11
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
500
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий
  1. Firefox не имеет доступа к вашей файловой системе по очевидной причине безопасности (см. этот пост в КБ для получения дополнительной информации).
  2. Есть много возможных обходных путей, если вы хотите сохранить файл css в другом месте, самым популярным из которых является webpack или любая другая система сборки. Практически каждый современный стек фронтенд-разработки использует его. Это инструмент node.js, который соберет все ваши статические ресурсы, используя предварительно настроенный путь, и «объединит их» в локальную сборку.
  3. Если это всего лишь один файл css для одного варианта использования, просто используйте относительный путь (или путь с префиксом file:///). Лучшее решение здесь, очевидно, самое быстрое и простое.
10.12.2018 16:36

Добавьте file: // в href вашей ссылки css, и он будет работать. Я просто попробовал сам, используя вашу структуру папок. Изначально он не работал в Firefox, как сообщалось, но работал в Chrome. Добавление file: // позволяет работать с обоими.

<link rel = "stylesheet" type = "text/css" href = "file://C:/tmp/folder1/css/mystyle.css"  />
10.12.2018 16:37

Другие вопросы по теме

Как решить проблему с прокруткой сайта?
Как работает CSS grid-autoflow?
Сделать вложенную таблицу с автоматической компоновкой таблицы, переполнение шириной 100%, когда окно слишком маленькое
Вкладки начальной загрузки, не работающие в отзывчивом представлении
Выровнять текст на плавающем img
Rails - как получить одинаковый размер (разрешение) изображения с нескольких серверов с помощью Cloudinary
Полностью покрыть один блок другим блоком того же размера
Есть ли способ применить веб-шрифты css в формате файла woff в среде Explorer 8?
Как разместить два или более куба рядом друг с другом в правильной перспективе с помощью преобразования CSS?
GetBoundingClientRect () возвращает неправильные значения для вложенных SVG в Chrome

Похожие вопросы

Как заставить <textarea> принимать размер текста
Сделать вложенную таблицу с автоматической компоновкой таблицы, переполнение шириной 100%, когда окно слишком маленькое
Не могу закрыть модальный на модальном
Полностью покрыть один блок другим блоком того же размера
Одно событие @click с несколькими переключателями
Параметры настраиваемого калькулятора Excel на веб-сайте
GetBoundingClientRect () возвращает неправильные значения для вложенных SVG в Chrome
Преобразовать: навести меню в onclick для использования на мобильных устройствах
Как изменить размер, выровнять по центру и сделать файл SVG адаптивным внутри его родительского div?
Отправьте заполненные поля онлайн