Question

我正在为我的公司创建一个内部网站，使用bootstrap和自定义CSS，一切都在Chrome和IE上正常运行。由于某种原因，Firefox根本没有加载CSS。

在这一天上，我的头撞了近两天。我在论坛上查看了很多不同的firefox CSS问题，但到目前为止我仍然无法解决问题。

奇怪的部分是我的WAMP服务器和localhost中的一切正常。我甚至最初在Firefox中构建了该网站。我怀疑服务器问题，但我不确定。我刚刚配置了这个服务器空间，所以我可能在某个地方错过了一步。

Firefox根本就没有加载CSS，这是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ADS</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css">

    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="justified-nav.css" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>

CSS（使用Bootstrap页面中的Justified-Nav示例作为基础）：

@charset "utf-8";

body {
  padding-top: 20px;
}

.link {
    font-size: 1.6em;
    display: block;
}

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

.header {
    margin-bottom: 1%;
}

.banner {
    width: 350px;
    height: auto;
}

.end {
    margin-top: 2%;
    font-size: 0.9em;
    color:#777;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Set main buttons for correct size and center in cols */
.btn-main {
    text-align: center;
    font-size: 3em;
}

.btn-center {
    text-align: center;
}

.separater {
    padding-top: 2%;
    padding-bottom: 2%;
}

.doc {
    padding-top: 2%;
    text-align: center;
}

.doc .btn-main {
    margin-bottom: 2%
}

.page-image {
    display: block;
    margin: auto;
}

#calendar {
    width:100%;
    height: 1200px;
}

/* Customize the nav-justified links to be fill the entire space of the .navbar */

.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5; /* Old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #f5f5f5), to(#e5e5e5));
  background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); IE6-9
  background-repeat: repeat-x; /* Repeat the gradient */
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #ddd;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

@media (min-width: 768px) {
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
    border-radius: 0 5px 5px 0;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}

Firebug只是告诉我“重新加载页面以获取CSS的源代码”，并且在重新加载时它永远不会被加载。缓存已被清除多次。任何地方都不会应用任何风格。有什么想法吗？

Firefox没有加载外部CSS

0 个答案: