CSS не работает в Firefox

Это HTML-код, я не знаю, делаю ли я ошибку в этих

<! DOCTYPE html>
<html lang="es">
  <head>
    <title>Appicua</title>
    <link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <div class="test"></div>
    <script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
    <script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html> 

А теперь это код CSS:

.test{
  width:50px;
  height:50px;
  background-color:red;
  border-color:black;
  border-width:5px;
  border-style:solid;
  margin:5%;
}

Как вы можете видеть, это простой красный квадрат, проблема в том, что весь этот код прекрасно работает в Google Chrome и Internet Explorer, но в Firefox он даже не отображается на экране.

Почему это происходит?

4 ответа

Решение

Реструктурируйте ваши файлы в один каталог:

- appicua
    index.html
    - css
        main.css
    - js
        jquery.js
        main.js

Тогда вы можете получить main.css с href="./css/main.css"и main.js с src="./js/main.js", Относительные пути здесь лучше, и, вероятно, будут работать.

Вам также не нужно указывать type="text/css" а также type="text/javascript"; они избыточны, так как браузеры в любом случае выбирают CSS для тегов стиля и JavaScript для тегов сценария, и существует путаница в отношении правильного типа MIME для JavaScript.

Вы также можете удалить закрытие / перед > в теге ссылки. (Если вы не используете XHTML.)

Ваша структура каталогов выглядит немного шатко. Если я получаю ваши ссылки исправить вашу работу в дереве каталогов, которое выглядит следующим образом:

введите описание изображения здесь

Если ваш HTML-файл находится в веб- каталоге, вы можете создать каталог css для вашего css (например, папку js, которая у вас уже есть) и ссылаться на файлы относительно, как это предлагается в других ответах. Относительные ссылки будут выглядеть так:

<script src="/js/jquery.js" type="text/javascript"></script>

а также

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

Стиль связывания называется относительным, поскольку пути к предоставленным файлам css и js относятся к положению файла HTML в структуре каталогов.

Я предполагаю, что Firefox не обрабатывает файлы на стороне клиента таким же образом. Попробуйте поместить файлы CSS / JS просто src="portalWebStyle.css" пока они находятся в том же каталоге, что и файл, который вы открыли.

Я не знаю, решит ли это вашу проблему, но вы забыли / в конце вашего второго тега ссылки, а также забыли закрыть свой второй script тег.

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