Приложение React, отображающее javascript только в Firefox

#javascript #reactjs #firefox

#javascript #reactjs #firefox

Вопрос:

Мое приложение react отображает на экране в Firefox то, что кажется javascript, оно не отображается в Chrome или edge. Ниже приведен скриншот того, что я вижу в firefox.

если я закомментирую локальную таблицу стилей таким образом, она исчезнет.

 <!-- <link rel="stylesheet" href="styles.css" /> -->
  

У кого-нибудь есть какие-либо идеи относительно того, почему это может быть?

[захват экрана поведения, описанного выше1

когда я проверяю, он отображается как часть тега head в html:

снимок экрана dom с выделенным wlwmwnt

index.html:

   <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto Mono:wght@600amp;display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>
    <div id="portal"></div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
  

Комментарии:

1. Можете ли вы опубликовать некоторый код

2. это выглядит как (древний, несмотря на наличие многих современных функций) javascript, а не заголовок

3. спасибо за ваш вклад, я обновил дополнительную информацию на основе ваших предложений

4. Кажется, вы каким-то образом сделали head гибким контейнером. Что говорит панель правил для этого элемента?

5. Большое спасибо, что это было. Я поставил *{display: flex;} . Я переместил его в тело, и оно исчезло. Еще раз спасибо.