Переход по какой-то причине начинается при загрузке страницы - PullRequest
Новая
       146

Переход по какой-то причине начинается при загрузке страницы

1 голос
/ 07 мая 2020

Обновление: когда я вставляю CSS внутри, проблема исчезает. Я зашел в инструменты разработчика на моем chrome и сравнил, что происходило, когда я перезагружал страницу. Первое изображение с внутренним CSS, второе с внешней таблицей стилей, вы можете увидеть разные результаты для свойства background-color:

enter image description here enter image description here

Исходное сообщение: Понятия не имею, почему это происходит, вот демонстрация . В основном, a требуется некоторое время, чтобы полностью отобразиться на странице.

Время, необходимое для «полного» отображения, такое же, как и в transition: background 5s;, как и в 5 секундах.

Вот тот же код на другой странице , где эффекта не наблюдается, я его тоже открыл в том же браузере.

Вот мой код в Visual Studio и в Chrome, тот же поведение наблюдается в Edge, но не в Firefox, в Firefox он просто загружается должным образом, а эффекты :hover работают правильно. Все 3 браузера обновлены до последних версий на момент написания.

Это происходит только тогда, когда я ссылаюсь на внешнюю CSS таблицу стилей. Когда я копирую css в файл html, проблема исчезает !!!

enter image description here enter image description here

CSS

a {
  color: #fff;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  display: inline-block;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  text-decoration: none;
  -webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
  transition: background 5s; /* For modern browsers */
}

a:hover {
  background: #3cc16e;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
    <meta name="keywords" content="" />
    <!-- Specifies a comma-separated list of keywords - relevant to the page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title></title>
  </head>

  <body>
    <p><a href="#">Hover on me</a></p>
  </body>
</html>

1 Ответ

0 голосов
/ 07 мая 2020

Решил вопрос, поискал ответы в гугле. Решение состоит в том, чтобы добавить открывающие и закрывающие теги <script> </script> в файл html, разделенные пробелом. По-видимому, это ошибка упомянутых выше браузеров.

...