FF和Chrome之间的CSS间距不同

Question

我正在使用这个wordpress网站：http://jillianssf.com/dev/

当我在Chrome中查看时，“欢迎来到Jillian”的字样似乎是正确的......就在导航菜单下方。问题是当我在Firefox中查看它有一个很大的空间。这个空间最初是从原始主题的导航中填充的。

我重新安排了导航，然后改变了：

.site-main {
    padding-top: 78px;
}

到

.site-main {
    padding-top: 0;
}

其他CSS：

.nav-main {
    background-color: rgba(0,0,0,0) !important;
    height:0;   
}

.nav-main .container { 
    position: relative;
    bottom: -81px;
    padding: 10px 0 0 0;
    background: transparent url(http://jillianssf.com/dev/wp-content/themes/theflavour-child/imgs/nav-bg.png) repeat-x bottom left;
    height:81px;
}

我使用firebug和标准的FF检查员进行了搜索，但无法找到为什么这仍然留下如此大的空间。

Answer 1

您将top分配给静态元素，但它对文档产生了不利影响。基本上，它包括项目所在的空间。

将.nav-main更改为绝对元素，然后移除top定位。

新

.nav-main {
    background: #FFF none repeat scroll 0% 0%;
    z-index: 9999;
    width: 100%;
    transition: top 0.4s ease 0s;
    position: absolute;
}

<强>旧

.nav-main {
    background: #FFF none repeat scroll 0% 0%;
    z-index: 9999;
    width: 100%;
    top: -126px;
    transition: top 0.4s ease 0s;
}