火狐没有css样式

Question

我做了一个页面,在其他浏览器都正常显示样式和js功能，但是到了火狐下完全没有样式了

.main-content{
     overflow: hidden;
 }
 nav{
     background: #ccc;
     height: 50px;
 }
 #banner{
     background: transparent;
     height: 650px;
 }
 #banner .inner{
     max-width:300px;
     text-align: center;
     margin: 0 auto; 
     position: relative;
     top: 160px;
 }
 #banner .inner h1{
     margin: 0;
     color: #fff;
 }
 button{
     border: none;
     background: yellow;
     color: #000;
     padding: 10px;
 }

 #banner button{
     padding: 14px 60px;
 }
#banner .inner .more{
    margin-top: 180px;
    color: #fff;
}
#banner .inner .subheading{
    color: rgba(255,226,0,0.72);
}

.subheading{
    line-height: 30px;
    margin: 30px;
}
 .logo{
     width: 1080px;
     height: 50px;
    float: left;
    padding-left: 12px;
    font-size: 20px;
    font-weight: bold;
    word-spacing: 2px;
    background: transparent;
}
.logo a{
text-decoration: none;
color: #000;
}
nav ul{
    list-style: none;
    margin: 0;
    background: yellow;
    float: right；
}
nav ul li,nav .logo{
     display: inline-block;
     line-height: 50px;
     margin-right: 20px;
 }
nav ul li a{
    display: inherit;
    height: inherit;
    line-height: 50px;
    float: right;
    text-decoration: none;
    color: #000;
}
.hr{
width: 100%;
margin: 20px auto;
height: 2px;

}
.active{
    border-bottom: 2px solid #a6b90b;
}
h1{
    padding: 12px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
h2{
    font-size: 30px;
}
h3{
    font-size: 20px;
}
p{
    font-size: 18px;
    letter-spacing: 1px;
}
ul{
    margin: 0;
    list-style: none;
}
.green-section{
    text-align: center;
    background: #5bbdce;
    color:#fff;
    padding: 100px 0;
}
.green-section .hr{
    background: #177c8e;
    width: 60%;
}
.wrapper{
    max-width: 1080px;
    margin:0 auto;
    } 
.sub-heading{
    font-size: 18px;
    padding: 20px;
}
.green-section .icon-group {
    margin-top: 60px;
}
.green-section .icon-group .icon{
display: inline-block;
width: 80px;
height: 80px;
margin: 20px;
background: #0d859a;
transform: rotate(45deg);
}
.gray-section{
    background: #000;
    color:#fff;
}
.gray-section .img-section{
width:45%;

}
.img-section img{
    width: 100%;
}
.gray-section .text-section{
    width: 55%;
}
.artical-preview>div{
    float: left;
    font-size: 0;
}
.clearfix:after{
     content: '';
    clear: both;
    display: block;
}
/**.artical-preview:after{
    content: '';
    clear: both;
    display: block;
}**/
.text-section{
    position: relative;
    top: 68px;
    left: 30px;
}
.text-section .sub-heading{
    font-size: 23px;
    margin-bottom: 20px;
}
.text-section h2{
    margin-bottom: 10px;
}
.text-section p{
font-size: 15px;
}
.artical-preview >*{
    max-width: 90%;
}
.artical-preview:nth-child(odd){
    background-color: rgba(255, 255, 255, 0.1);
}
.purple-section{
    background: #9f2ae8;
    color: #fff;
    padding: 80px;
}
.purple-section .heading-wrapper{
    text-align: center;
}
.purple-section .heading-wrapper .hr{
    background: #5a078e;
    width: 60%;
}
.card{
    float: left;
    width: 50%;
    min-height: 300px;
    padding: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /**border: 1px solid #fff;**/
}
.card:first-child{
    background: rgba(0,0,0,0.05);
}
.card:nth-child(2){
    background: rgba(0,0,0,0.09);
}
.card:nth-child(3){
    background: rgba(0,0,0,0.13);
}
.card:nth-child(4){
    background: rgba(0,0,0,0.15);
}
footer{
    background: #333;
    color: #fff;
    min-height: 200px;
    text-align: center;
}
ul.share-group{
display:block;
   width: 1080px;
   margin: 0 auto;
   padding: 30px;
}
.share-group li{
    display: inline-block;
    padding: 10px;
}
.copy{
    padding: 40px;
}
.main-content{
    background: #444 url(img/4.jpg);
    background-attachment: fixed;
    background-repeat:no-repeat;
    background-size: cover;
   /**background-position: center center;**/
}
header{
   background: rgba(0,0,0,0.4);
}
#sidebar{
    width: 200px;
    background: #333;
    position: fixed;
    top: 0;
    right: -200px;
   transition: right 0.5s;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul a{
    width: 100%;
    padding: 10px 30px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
}
#sidebar ul a:hover{
    background: #444;
}
.mask{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background: rgba(0,0,0,0.3);
}
.backToTop{
    position: fixed;
    bottom: 30px;
    right: 30px;
    color: #fff;
    border: 1px solid #888;
    padding: 10px;
}
.share-group img{
    width: 30px;
    height: 30px;
}



.wechat-group{
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
}
.wechat-group:hover .wechat-layer{
    opacity: 1;
    filter: alpha(opacity=100);
   -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.wechat-layer{
    position: absolute;
    left: 0;
    top: 0px;
    width: 145px;
    height: 145px;
    background: url(img/wechat.jpg) 45px 50px;
    background-position: 50px 50px;
    background-repeat:no-repeat;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.01);
    -moz-transform: scale(0.01);
    -ms-transform: scale(0.01);
    -o-transform: scale(0.01);
    transform: scale(0.01);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
     -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s; 
}
#fp-nav{
    display: block;
    position: fixed;
    z-index: 100;
    top: 50%;
    opacity: 1;
    box-sizing: border-box;
}
.right{
    right: 30px;
}
#fp-nav ul li{
    display: block;
    margin: 7px;
    position: relative;
    width: 14px!important;
    height: 14px!important;
    margin-bottom: 10px!important;
}
#fp-nav ul li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    color: #337ab7;
    background-color: transparent;
}
#fp-nav ul li a span{
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    transition: all .1s ease-in-out;
}
#fp-nav ul li a span{
    width: 14px;
    height: 14px;
    left: 0!important;
    top: 0!important;
    margin: 0!important;
    border: 1px solid #6090b6!important;
    background: transparent;
}
js:

 $(function(){
    'use strict';
    var sidebar=$('#sidebar'),
        mask=$('.mask'),
        sidebar_trigger=$('#sidebar_trigger'),
        backButton=$('.backToTop');
    function showSidebar(){
        mask.fadeIn();
        sidebar.css('right',0);
    }
    function hideSidebar(){
        mask.fadeOut();
        sidebar.css('right',-sidebar.width());
    }
    sidebar_trigger.on('click',showSidebar)
    mask.on('click',hideSidebar)
    backButton.on('click',function(){
    $('html,body').animate({
        scrollTop:0
    },800)})
    $(window).on('scroll',function(){
        if($(window).scrollTop()>$(window).height())
            backButton.fadeIn();
        else
            backButton.fadeOut();
    })
$(window).trigger('scroll');
$('.list-nav').first().css("background","#6090b6");
$('.list-nav').on('click',function(){
    $(this).css("background","#6090b6");
    var $otherSpans = $(this).closest('li').siblings().find('span.list-nav');
    
    $otherSpans.css("background","");
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000);       
    return false;
})


})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的博客</title>
    <link href="https://necolas.github.io/normalize.css/6.0.0/normalize.css" rel="stylesheet" type="text/css" />
    <link href="D:\mylife\front end_projects\css\2017032801.css" rel="stylesheet" type="text/css" />
    <link href="D:\mylife\front end_projects\jslib\Minimal.css" rel="stylesheet" type="text/css" />
   
</head>
<body><div class="main-content">
    <header>
        <nav>
        <div class="logo"><a href="">胡八一</a></div>
        <ul>
            <li><a href="" class="active">MENU</a></li>
            <li><a href="">首页</a></li>
            <li id="sidebar_trigger"><a href="#">关于我</a></li>
           
        </ul>
        </nav>
         <div id="banner">
            <div class="inner">
                <h1>胡八一</h1>
                <p class="subheading">爱吃的孩子都是好孩子</p>
                <section class="webdesigntuts-workshop"><form action="" method=""><input type="search" placeholder="搜索"><button>Search</button></form></section>
                <div class="more">更多</div>
           </div>
           <div id="fp-nav" class="right">
            <ul>
                <li><a href="#banner"><span class="list-nav"></span></a></li>
                <li><a href="#section-one"><span class="list-nav"></span></a></li>
                <li><a href="#section-two"><span class="list-nav"></span></a></li>
                <li><a href="#section-three"><span class="list-nav"></span></a></li>
               
            </ul>
    </div>
        </div>
    </header>
    
   <div class="content">
    <section id="section-one" class="green-section">
        <div class="wrapper">
            <div>
                <h2>爱运动</h2>
                <div class="hr"></div>
                <p class="sub-heading">作为一个阳光的女孩，我每天都会抽出一定的时间去健健身。</p>
            </div>
            <div class="icon-group">
                <span class="icon">img1</span><span class="icon">img2</span><span class="icon">img3</span>
            </div>
        </div>
    </section>
    <section id="section-two" class="gray-section">
      <div class="artical-preview clearfix">
          <div class="img-section">
              <img src="D:\mylife\front end_projects\css\img\1.jpg"/>
          </div>
          <div class="text-section">
              <h2>爱学习</h2>
              <div class="sub-heading">学霸模式</div>
              <p>我拥有十分的学习热情，我考了很多证，这些证都是我花费极少精力就考到的。</p>
          </div>
      </div>
       <div class="artical-preview clearfix">
          
          <div class="text-section">
              <h2>爱学习</h2>
              <div class="sub-heading">学霸模式</div>
              <p>我拥有十分的学习热情，我考了很多证，这些证都是我花费极少精力就考到的。</p>
          </div>
          <div class="img-section">
              <img src="D:\mylife\front end_projects\css\img\2.jpg"/>
          </div>
      </div>
       <div class="artical-preview clearfix">
          <div class="img-section">
              <img src="D:\mylife\front end_projects\css\img\3.jpg"/>
          </div>
          <div class="text-section">
              <h2>爱学习</h2>
              <div class="sub-heading">学霸模式</div>
              <p>我拥有十分的学习热情，我考了很多证，这些证都是我花费极少精力就考到的。</p>
          </div>
      </div>
    </section>
    <section id="section-three" class="purple-section">
        <div class="heading-wrapper">
            <h2>爱时尚</h2>
            <div class="hr"></div>
            <div class="sub-heading">约吗？约吗？约吗？约吗？约吗？约吗？约吗？约吗？约吗？v约吗？<div>
        </div>
        <div class="card-group clearfix">
            <div class="card">
                <h3>运动衣</h3>
                <p>maikkkkkllhhgfhejnooo
                    ooooolll
                    lluuuuuu</p>
            </div>
            <div class="card">
                <h3>运动衣</h3>
                <p>maikkkkkkkkkkk
                    kkllhhg
                    fhejn</p>
            </div>
            <div class="card">
                <h3>运动衣</h3>
                <p>maikkkkkkkkkkk
                    kkllhhg
                    fhejn</p>
            </div><div class="card">
                <h3>运动衣</h3>
                <p>maikkkkkkkkkkk
                    kkllhhg
                    fhejn</p>
            </div>

        </div>
       
        
    </section>
      
 
     
   </div>
    <footer>
            <ul class="share-group">
                <li><a href="#"><img src="D:\mylife\front end_projects\css\img\usually\facebook.png"/></a></li>
                <li><a href="#"><img src="D:\mylife\front end_projects\css\img\usually\google .png"/></a></li>
                <li><a href="#"><img src="D:\mylife\front end_projects\css\img\usually\twitter.png"/></a></li>
                <li><a href="#" class="wechat-group"><span class="wechat-layer"></span><img src="D:\mylife\front end_projects\css\img\usually\wechat.png"/></a></li>
                <li><a href="#"><img src="D:\mylife\front end_projects\css\img\usually\weibo.png"/></a></li>
               
            </ul>
            <div class="copy">
                &copy 冯瑞君   2017-03-28
            </div>
    </footer>
</div>
<div class="mask"></div>
<div id="sidebar">
<ul>
    <li><a href="D:\mylife\front end_projects\echartslearn\radar.html">技能雷达图</a></li>
    <li><a href="D:\mylife\front end_projects\echartslearn\pipechart.html">生活消费</a></li>
    <li><a href="#">社团经历 动态设计</a></li>
    <li><a href="#">许愿墙效果</a></li>
    <li><a href="#">item1</a></li>
    <li><a href="#">item5</a></li>
   
</ul>
</div>
<button class="backToTop"><img src="D:\mylife\front end_projects\css\img\usually\top.png"/></button>
<script type="text/javascript" src="D:\myweb\html\jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="D:\myweb\js\myblog.js"></script>
<script type="text/javascript" src="D:\myweb\js\myblog0.js"></script>
<script type="text/javascript" src="D:\mylife\front end_projects\jslib\pace.js"></script>
</body>
</html>

Answer 1

是不是没有加厂商私有前缀 或者你样式没有进来

Answer 2

把代码发一份吧。这样提问大家的确不好帮你分析原因。

Answer 3

建议先把Firebug关掉试试，原生自带的已经很好用了，反而是Firebug有些时候不太好用……另外就是排除下其他的插件。