Question

我有一个非常奇怪的故障，只发生在firefox中。只有在用户向下滚动页面然后将鼠标移动到标题导航后，我的网站的标题div才会从视图中消失。我一直在寻找几个小时，我可能会遗漏哪些代码。

该网站不是超级动态的，因为它确实需要如此我不认为有任何Jquery / javascript具有格式不正确的事件监听器或任何东西。我怀疑问题是CSS代码中的东西。我为这个网站做了3件不同的事情，我通常不做。我使用了一个绝对定位的div，我使用了z-index，我在nav中构建了一个仅CSS嵌套的菜单结构。

虽然这些东西中没有一个（除了ap div）本质上是冒犯性的，但我想知道这3个项目的组合是否会导致我出现问题？

这是标题div和管理CSS的页面结构

   <div id="header">

        <div id="headwrap">

            <div id="logo">
                <img src="images/logo.png" height="35px" width="35px"/>                    
            </div>  <!-- end logo -->

            <div id="logotitle" class="ie">
                Cambridge Companies
            </div>  <!-- end logotitle -->

            <div class="headnav">

            <ul id="top-menu">
                <li><a href="?page=home"><span>Home</span></a></li>
                <li> <a href="#"><span>Company</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=company">Overview</a></li>
                        <li><a href="?page=mission">Our Mission</a></li>
                        <li><a href="?page=team">Meet the Team</a></li>
                    </ul>
                </li>
                <li> <a href="#"><span>Investments</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=completed">Completed</a></li>
                        <li><a href="http://www.cambridgecompanies.us/wordpress/">Opportunities</a></li>
                    </ul>
                </li>
                <li><a href="?page=investments"><span>Services</span></a></li>
                <li><a href="#"><span>Careers</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=vp">VP of Business Development</a></li>
                        <li><a href="?page=assistant">Assistant</a></li>
                        <li><a href="?page=intern">Intern</a></li>                          
                    </ul>
                </li>
                <li><a href="?page=contact"><span>Contact</span></a></li>
            </ul>

            </div>  <!-- end headnav -->

            <div id="address" align="right">
                <strong>1.888.615.6166</strong><br/>9075 W. Diablo Dr., Las Vegas, NV 89148
            </div>  <!-- end address -->

        </div>  <!-- end headwrap -->

    </div>  <!-- end header -->

#header{
position:absolute;
/*background-color:#F90;*/      /* position testing */
background:url(../images/navigation-background.png) repeat;
width:100%;
height:50px;
z-index:2;
}

#logo{
display:inline-block;
padding-top:6px;
margin-left:80px;   
}

#logotitle{
position:absolute;
/*background-color:#CC9900;*/   /* position testing */
display:inline-block;
color:#FFFFFF;
height:26px;
width:auto;
font-size:26px;
font-family:Arial, Helvetica, sans-serif;
margin-left:4px;
margin-top:10px;
}

.headnav{
/*background-color:#0099FF;*/   /* position testing */
display:inline-block;
/*margin-left:12px;*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:1pt;
height:10px;
padding-bottom:24px;
margin-left:280px;
}

.navitem{
display:inline-block;
color:#ccb38b;
}

.navitem a:link{color:#ccb38b;}
.navitem a:visited{color:#ccb38b;}
.navitem a:hover{color:#FFF;}
.navitem a:active{color:#ccb38b;}




#address{
/*background-color:#99FF33;*/   /* position testing */
display:inline-block;
float:right;
margin-right:80px;
margin-top:9px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#ccb38b;

}

#top-menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
}

#top-menu > li {
float:left;
display:block;
height:52px;
}

#top-menu > li > a {
color:#ccb38b;
font-size:12px;
text-decoration:none;
display:block;
}

#top-menu  > li > a > span {
border-left:1px solid #ccb38b;
display:inline-block;
padding:0 12px;
height:12px;
margin:12px 0;
}

#top-menu > li:first-child > a > span {
border-left:0;
}

#top-menu > li:hover > a > span {
color:#fff;
text-decoration:none;
}

#top-menu li:hover .sub-menu {
display:block;
}

#top-menu .sub-menu {
position:absolute;
width:210px;
background:transparent url(../images/navigation-background.png) repeat;
list-style:none;
padding:0;
display:none;
margin:0;
margin-top:7px;
}

#top-menu .sub-menu a {
display:block;
padding:10px;
color:#ccb38b;
font-size:12px;
text-decoration:none;
}

#top-menu .sub-menu a:hover {
text-decoration:none;
color:#fff;
}

感谢您提供有关清理我的代码或一般想法的任何帮助，建议，意见。

Answer 1

！UPDATE！ - 我已经解决了这个问题。起初我认为这是z指数，然而，改变这种情况只会让事情变得更糟。问题是#header元素上的定位。因为我把它定位为“绝对”，所以它被错误地解决了。解决方法是将其更改为以下内容：

#header{
    position:fixed; /* note that this changed to fixed instead of absolute */
    /*background-color:#F90;*/      /* position testing */
    background:url(../images/navigation-background.png) repeat;
    width:100%;
    height:50px;
    z-index:2;
 }

一旦我更改了定位，标题按设计运行。无论滚动如何，它都很好地贴在窗口的顶部，并且不会像之前报道的那样在firefox中消失。

我觉得我很愚蠢，我没有早点想到这一点，但嘿，你的学习方式是对的吗？

我希望这有助于其他人遇到同样的问题。

header div仅在firefox中消失（在mouseover上）

1 个答案: