我的网站无法在firefox上工作

问题描述：

所以我为我的实习任务做了一个网站（我的学习第一年因此缺乏经验）。可悲的是，我遇到了这个问题，它在除Firefox以外的所有浏览器都能正常工作。 Firefox的问题是没有任何工作。没有一个菜单真的链接任何东西。 ****我的网站无法在firefox上工作

我想知道是否有人在这里可以帮助我解决问题后无数小时试图解决它自己。

所以我使用Html，CSS和一些JavaScript的网站发布如下。

 <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="tartufi.css" media="screen"/> 
<title>xxxxxx</title> 
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
    <script src="script.js" type="text/javascript"></script> 
<link href='http://fonts.googleapis.com/css?family=Karla:700' rel='stylesheet'  type='text/css'/> 
</head> 

<body> 
<p>&nbsp;</p> 

<div class="header"> 

    </div> 

<div class="alpha"> 
     <div class="headermenu"> 


      <div class="logo"> 

      </div> 

     <nav> 
     <ul id="navigation"> 
      <li><div class="navSection "><a id="nav1" href="">HOME</a> </div></li> 
      <li><div class="navSection "><a id="nav2" href="">PASSION</a> </div></li> 
      <li><div class="navSection "><a id="nav3" href="">CONTACT</a> </div></li> 
     </ul> 
     </nav> 
     <div class="talen"> 
      <a href="index.html"><img style="border:0;" src="nederlands.png" alt="English" /></a> 
      <a href="index_en.html"><img style="border:0;" src="english.png" alt="English" /></a> 
      <a href="index_du.html"><img style="border:0;" src="deutsch.png" alt="Deutsch" /></a> 
     </div> 
    </div> 

    <div class="content"> 

    <article class="content"> 

    <section id="s1"> 
     <div id="services" class="f"> 
     </div> 
    </section> 

    <section id="s2"> 
     <div id="services2" class="b"> 

     <div class="tekstcontent"> 


     </div> 

      <div class="imagecontent"> 
      </div> 

     </div> 
    </section> 


    <section id="s3"> 
     <div id="services3" class="c"> 

     <div class="contact"> 
     person lastname <br/> 
     street<br/> 
     postal code<br/><br/> 

     <img src="streep.png" alt="" /><br/><br/> 
     <img src="tel.png" alt=""/> 
     phone <br/><br/> 
     <img src="fax.png" alt="" > 
     fax<br/><br/> 
     <img src="email.png" alt="" align="center"> 
     <a href="mailto:[email protected]" class="contactlink">[email protected]</a> 
     </div> 

      <div class="imagecontent"> 
      </div> 


     </div> 
    </section> 
    </article> 
    </div> 

    <div class="footer"> 
    Copyright © 2014. 
<a href="http://www.xxxxx.xxxx/" target="_blank" style="color:grey;">xxxx xxxx xxxxxx</a> 
</div> 
</div> 



</body> 
</html>

我的CSS

body { 

    background-color: black; 
    background-image:url("background.jpeg"); 
    background-size: 1300px 768px; 
    background-repeat:no-repeat; 
    background-position: top; 


} 

.alpha { 

    width: 1300px; 
    height: 768px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -55px; 
    position:relative; 

    } 

.header { 

    width: 100.9% ; 
    margin-left: -5px; 

    height: 100px; 
    margin-top: -55px; 
    background-color:white; 
    opacity: 0.4; 
    float: left; 
    } 

.headermenu { 

    width: 1300px; 
    height: 120px; 

    margin-left:auto; 
    margin-right:auto; 
    position: absolute; 



    } 

.logo { 

    width:263px; 
    height:350px; 
    position:relative; 
    background-image:url("LOGO.png"); 
    background-size:100%; 
    color:green; 
    float:left; 
    background-repeat:no-repeat; 
    } 

.imagecontent { 

    width:1300px; 
    height:648px; 
    position:relative; 
    background-image:url("bgcontent.png"); 
    margin-left: 600px; 
    background-repeat:no-repeat; 

    } 


.tekstcontent { 

    width:435px; 
    height:120px; 
    position:relative; 
    background-color:#D6D6D6; 
    float:left; 
    margin-left: 263px; 
    margin-top: 120px; 
    font-family:Arial, Helvetica, sans-serif; 
    color:black; 
    padding-top: 25px; 
    padding-bottom: 25px; 
    padding-right: 50px; 
    padding-left: 20px; 

    } 

.contact { 

    width:400px; 
    height:400px; 
    font-family:Candara; 
    position:relative; 
    float:left; 
    margin-left: 320px; 
    margin-top: 70px; 
    z-index:2; 
    padding: 10px ; 
    font-size: 30px ; 
    text-align: middle; 
    } 




.content { 

    width:1300px; 
    height:648px; 
    overflow: hidden; 

    } 

.f  { 

    Width:1300px; 
    height:648px; 

    opacity:0; 
    } 

.b { 

    Width:1300px; 
    height: 648px; 
    background-color: white; 

    } 

.c  { 

    Width:1300px; 
    height: 648px; 
    background-color: white; 
    } 

.talen { 
    height:120px; 
    width:300px; 
    padding-left: 70px; 

    float:left; 
    } 

.footer { 
    width:1300px; 
    height:23px; 
    background-color:#000000; 
    color:grey; 
    text-align:center; 
    } 



/*nav*/ 



ul#navigation { 
     list-style:none; 
     position:relative; 
     top:-15px; 
     } 
    ul#navigation li { 
     float:left; 
     margin-left:20px; 
     margin-right:-20px; 
     } 
    ul#navigation li a { 


     display:block; 
     padding:30.5px 30px; 
     text-decoration:none; 
     color:black; 
     font-size: 33px; 
     margin-left:10px; 
    font-family: 'Karla', sans-serif; 
     font 
     } 

    ul#navigation li a:hover{ 
     background-color: #c62126; 

     } 


/* page styles */ 

a { 
    color: red; 
}

和我的js

// kadaj Oct 2012 

$(document).ready(function() { 
    $('.navSection').on('click', function (e) { 
     debugger; 
     var elemId = ""; //eg: #nav2 
     switch (e.target.id) { 
     case "nav1": 
      elemId = "#s1"; 
      break; 
     case "nav2": 
      elemId = "#s2"; 
      break; 
     case "nav3": 
      elemId = "#s3"; 
      break; 
     case "nav4": 
      elemId = "#s4"; 
      break; 
     } 
     $('.content').animate({ 
      scrollTop: $(elemId).parent().scrollTop() + $(elemId).offset().top - $(elemId).parent().offset().top 
     }, { 
      duration: 1000, 
      specialEasing: { 
       width: 'linear', 
       height: 'easeOutBounce' 
      }, 
      complete: function (e) { 
       //console.log("animation completed"); 
      } 
     }); 
     e.preventDefault(); 
    }); 
});

任何帮助极为赏识

它在控制台中显示什么？ – 2014-09-02 08:55:46

这是一个非常含糊的问题，请在发布之前尽量缩小问题范围，我们不是*职业者，他们希望投入7个小时为您解决问题。小提琴也可以帮助很多。 – JohannesB 2014-09-02 08:56:01

x站点脚本。我和FF有同样的问题。您通过CDN导入jQuery（src =“http://code.jquery.com/jquery.min.js”），出于某种原因FF不喜欢它（也许它可以在FF设置中更改，不要知道）。如果您将jQuery下载到您托管该页面的本地机器/服务器，并以此方式将其包含在您的页面中，它应该可以工作。 – 2014-09-02 08:58:57

答

你<div class="header"></div>与导航您的DIV的前面，因此，你可以不要点击导航div内的任何内容。
添加在CSS的.headermenu：

.headermenu{ 
    //what you had before 
    z-index: 999; 
}

Z-index较高会带来什么元素与它（或在与z-index的元素）中的任何其他与较低的z-index前（我想默认值是1）。

这解决了我的问题！非常感谢！并感谢你的完美。我将铭记未来！ – dinges 2014-09-02 09:45:18

我很高兴我可以帮助:) – 2014-09-02 09:46:19

答

根据当前代码，将下面的代码放在CSS文件的末尾。它将在Firefox中工作。使用Fiddler进行测试。

#navigation 
{ 
    z-index: 1000; 
}

这解决了我的问题！非常感谢！ – dinges 2014-09-02 09:44:27

我的网站无法在firefox上工作

相关推荐