1

何らかの理由で、ヘッダーが Firefox でプッシュ ダウンされています。SafariとChromeで問題なく動作します。ヘッダーの位置を絶対にしようとしましたが、親の左隅に浮かんでいるはずなのに、押し下げられています-そうではありません。そのため、ヘッダーではなくボディが押し下げられていると思いました。

だから私は自分のボディタグの背景画像の位置を調査し始めましたが、画像の配置のあらゆる種類の組み合わせを試してみましたが、うまくいきませんでした。

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

:cover- の代わりに :contain を試しましたが、うまくいきませんでした。

それから私はそれが高さに関係していると思いました：自動、しかしいいえ。

すべてのページで発生していますが、ホームページで実験しています。

ここにサイトがあります：

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 カバー プロパティを持つ background-image を持つ body.home-page があります。

.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;
}
4

2 に答える 2

1

このスタイルを追加:

#home-mobile{
  overflow:auto;
}
于 2013-10-04T00:00:31.483 に答える
1

大きなmargin-topオン.home-content > h2が問題の原因です。

それを修正する賢明な方法の 1 つは、に追加するoverflow: hiddenこと.home-contentです。

これはおそらく Firefox で、マージンの崩壊の処理に関するバグ (?) が原因で発生しています。

于 2013-10-04T00:01:42.837 に答える