标头仅在 Firefox 中被下推答案

【问题标题】：header is pushed down only in firefox标头仅在 Firefox 中被下推
【发布时间】：2013-10-03 23:52:02
【问题描述】：

由于某种原因，我的标题在 Firefox 中被向下推。它在 safari 和 chrome 中运行良好。我尝试将标题位置设为绝对位置，但当它应该浮动到其父级的左角时它被推下 - 它没有。所以这让我觉得身体被推了下去，而不是头球。

所以我开始调查我的身体标签上的背景图像位置，但我尝试了各种组合定位图像但没有运气，而且

.home-body {
    position: relative; 
    top: 0; left: 0; 
}

我试过 :contain 而不是 :cover- 没用。

然后我虽然它与高度有关：自动，但不是。

我一直在尝试主页，尽管它正在所有页面上发生。

这里是网站：

http://lindseypod.com/v10/

我的身体标签：

body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 100;
    padding: 0;
    margin: 0;
}

我有一个带有 CSS 封面属性的背景图像的 body.home 页面：

.home-page {
   background: url(images/home_2.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; 

}

然后我有一个标题标签，里面有元素：

header {
    width: 100%;
    background-color: rgba(255,255,255,0.8);    
}

.header-content 在标头内：

.header-content, 
.footer-content, 
.content, 
.bars-content  {
    width: 96%;
    height: auto;
    margin: 0 auto;
    color: rgba(255,255,255,1);
    max-width: 960px;
}

【问题讨论】：

标签： css background background-image margins

【解决方案1】：

添加此样式：

#home-mobile{
  overflow:auto;
}

【讨论】：

【解决方案2】：

.home-content > h2 上的大号margin-top 是问题的根源。

解决此问题的一种明智方法是将overflow: hidden 添加到.home-content。

这可能是由于处理 collapsing margins 的错误 (?) 在 Firefox 中发生的。

【讨论】：