-5

Firefox でのみ、ページの上部に大きな空白が表示されます。すべての要素を検査しようとしましたが、問題は見つかりませんでした。折りたたみマージンもチェックしましたが、見つかりません。

HTML5、modernzr、jquery を使用しています。

ウェブサイト URL : http://devvanickcom.vanickurl.com/

ページのスクリーンショット

4

3 に答える 3

5

これは Firefox のバグのようです ( #451791 )。マージンの崩壊は間違っています。高さhr.clear/パディング/境界線がないため、 の上に 90 ピクセルのhr.clearマージンが生じますが、浮動要素の下に 90 ピクセルの正しいマージンも適用されます。

通常はマージンの崩壊を防ぐ修正を行うと、この動作が停止します。たとえば、設定によってhr.clear { height: 1px }すべてが押し戻されますが、1 ピクセル下に移動することもあり、これは望ましくありません。興味深い修正は、 を設定することheader { padding-top: .001em }です。これは、実際に物事を視覚的にシフトするのに十分なパディングを追加しませんが、マージンが の境界を越えて崩壊するのを防ぐのに十分な数ですheader。

または、コードを書き直して、この構造を回避することもできます。

于 2012-05-25T03:54:03.540 に答える
0

CSSpositionのクラスのプロパティを変更して、次のように設定します。#logo

position: relative、クラスは次のようになります。

#logo {
    background: url("/Content/images/sprite.png") repeat-x scroll left top transparent;
    display: block;
    height: 85px;
    position: relative;
    text-indent: -9999px;
    top: -20px;
    width: 180px;
}

その後、header navクラスを変更する必要があります（マージンは上に90pxでした）

header nav {
    margin: 40px 0 5px;
    padding: 0;
    text-align: center;
}

次に、必要に応じて正確に調整する必要があります。firefox では次のようになります。

ここに画像の説明を入力

于 2012-05-25T02:25:59.710 に答える
0

とても奇妙です。アニムソンが言ったように、最も簡単で最善の方法は、<hr class="clear">下で削除することだと思い<div id="contact-toggler-wrapper">ます。レイアウトに影響を与えずにうまくいきました。

于 2012-05-25T02:55:31.837 に答える