Chrome - Inline CSS работает, но таблица стилей не работает - PullRequest
Новая
       1

Chrome - Inline CSS работает, но таблица стилей не работает

0 голосов
/ 09 мая 2018

Я написал следующий CSS, и он работает на Firefox, но не на Chrome. 

body
{
    background: darkorange;
    padding-top: 54px;
}

CSS выше - это только пользовательский CSS, который я применил к своему проекту. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" th:href="@{/css/style.css}" type="text/css"/>

Это на Chrome и это неправильно .

This on Chrome and it's wrong

Это на Firefox и правильно

This is on **Firefox** and it's **correct**

Что еще более странно, это то, что когда я пишу встроенный CSS-код, он работает в обоих браузерах. 

<body style="padding-top: 54px; background: darkorange;">

Два вопроса:

1) Почему CSS не работает на Chrome?

2) Почему CSS работает, когда написано inline?

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

С CSS существует файловая иерархия. Когда вы связываете таблицу стилей в своей голове, она читается сверху вниз, причем последний файл имеет приоритет над первым, который вы вызвали.

Ex 

<link rel="stylesheet" type="text/css" href="css/globals.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

В этом коде index.css будет иметь приоритет над globals.css, поскольку он был последним доступным.

Обычно это проблема, когда вы пытаетесь применить несколько эффектов к элементу с помощью двух разных таблиц стилей, однако в вашем случае это также может быть правдой. Вы можете обнаружить, что стиль Bootstrap имеет приоритет над вашим собственным.

Как отладчики Chrome, так и Firefox могут оказаться полезными для вас, чтобы узнать, какие стили добавляются к элементам. Я умоляю вас проверить, что говорит ваш отладчик, и пойти оттуда.

0 голосов
/ 19 июля 2018

Убедитесь, что вы делаете полное обновление в браузере после изменения файла CSS.CTRL + R или CTRL + F5 должны работать.

0 голосов
/ 09 мая 2018

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

Во-вторых, дважды проверьте ваш путь к CSS-файлу и элементу 

<link rel="stylesheet" type="text/css" href="style.css">

В-третьих, используйте инструмент Chrome Debugger. Щелкните правой кнопкой мыши и осмотрите тег body, чтобы увидеть, применяется ли какой-либо стиль.

Я проверил то, что вы предоставили, у меня работает и Firefox, и определенно Chrome. Вы можете увидеть это ниже.

Открыть JS Fiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...