Question

你可以去www.natropiegra.pl吗？在至少2个浏览器中。在谷歌浏览器和Opera中它都很好，但在Firefox中，我的菜单并不完全位于网站的顶部。有一个轻微的下降。但只有列表'ul'的背景部分为什么？ ;（

这是代码。

CSS：

    .nav-container { 
    font-family: 'Open Sans', sans-serif; 
    background: #1a1a1a repeat-x 0 0; 
    -moz-box-shadow: 1px 1px 2px #888;
    -webkit-box-shadow: 1px 1px 2px #888;
    box-shadow: 1px 1px 2px #888;

}


.f-nav { 
    z-index: 901; 
    position: fixed; 
    left: 0; 
    top: -70; 
    width: 100%; 
    -moz-box-shadow: 1px 1px 2px #888;
    -webkit-box-shadow: 1px 1px 2px #888;
    box-shadow: 1px 1px 2px #888;

} 

.nav { height: 102px; }
    .nav ul { list-style: none; }
    .nav ul li{float: left; margin-top: 50px; padding: 15px; border-right: 0px solid 

#e0e0e0;}
    .nav ul li:first-child{ padding-left: 31.0em;}
    .nav ul li a { text-decoration: none; color: #e0e0e0 }
    .nav ul li a:hover{ text-decoration: none; color: #00bca4;
}

HTML：

   <div class="nav-container">
<div class="nav">

<div id="up2">
<a href="#logowhite1"><img id="up1" src="./image/up.png" alt="">
</a>
</div>

<div id="yt">
<a href="http://www.youtube.pl/user/natropie" target="_blank"></a>
</div>

<div id="fb">
<a href="http://www.facebook.pl/natropiegra" target="_blank"></a>
</div>



 <ul>
        <li><a href="#pasek1">INFO</a></li>
        <li><a href="#pasek2">ZASADY</a></li>
        <li><a href="#pasek3">GRAJ</a></li>
        <li><a href="#pasek4">PREZENTY</a></li>
        <li><a href="#pasek5">KONTAKT</a></li>
 </ul>
    <div class="clear"></div> 

</div>
</div>

JS：

<script type="text/javascript">
  $(document).ready(function() {
    $.localScroll();
  });
</script>

<script type="text/javascript">
jQuery("document").ready(function($){

    var nav = $('.nav-container');
    navOff  = nav.offset();

    $(window).scroll(function () {
        if ($(this).scrollTop() > 49) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });

});
</script>

Answer 1

您的列表有一个默认的边距，可以移动标题。这应该解决它：

.nav ul {
     margin: 0;
}

Answer 2

将以下内容添加到CSS文件的顶部，此问题将消失：

* {
    margin:0px;
    padding:0px;
}

FIREFOX中的粘性菜单错误

2 个答案: