1

このウェブサイトをチェックしてください --> http://justicecup.radiantwebtools.com/

nav/logo/social-media 領域の下のセクションは、Chrome/Safari とは対照的に、Firefox ではさらに離れています (望ましい分離)。

この問題は、HTML の次の部分に関係しているようです。

<div class="header-container">...</div> <!--- Okay... --->
<div class="row content"> <!--- DevTools shows this the right underneath the header area...okay, thats correct --->
    <div class="width-container">...</div> <!--- on Chrome/Safari it's good.  On Firefox, this is pushed down further....why? --->
</div>

これに対抗するためにヘッダー領域にいくつかのcssを与えようとしましたが、役に立ちませんでした

.header-container { overflow:none;}

このスクリーンショットも違いを示しています --> http://screencast.com/t/CrF9HEaki

ご協力いただきありがとうございます。

4

2 に答える 2

2

この問題はマージンの崩壊と関係があると思います。

この問題の 1 つの修正は、以下の 2 つのルールを変更することです。

#template .content .story-primary {
    margin-top: 28px;
}
#template .content .story {
    margin-top: 62px;
}

に：

#template .content .story-primary {
    padding-top: 28px;
}
#template .content .story {
    padding-top: 62px;
}
于 2013-07-13T14:37:47.850 に答える
0

.width-containerあなたのページ レイアウトは非常に複雑で、問題の一部は2 つの不適切な場所での使用に起因していると思います。ブラウザーの inspect 要素を使用して css をいじっていますが、一方のスタイルを変更すると、もう一方にカスケードされます。ページの再設計が役立つと思います。ページ コンテンツ全体 (背景を除く) を div で囲み、それに width-container スタイルを適用することをお勧めします。

<div id="body">
    <div class="width-container">
        <div id="templatewrapper"> ... </div>
        <div id="templatefooter"> ... </div>
    </div>
</div>

次に、ヘッダーの周りの width-container の名前をより適切なものに変更する必要があります。

<div id="page-header">
    <div class="logo"> ... </div>
    <div class="rwtmodule navigation-module meganav"> ... </div>
    <div class="social-media"> ... </div>
</div>

float:left;これを行った後、ロゴ、ナビゲーション、ソーシャル メディアの を に置き換えてdisplay:inline-block、さまざまな を削除する必要がありますmargin。次に、paddingまたはmarginを に適用して、#page-headerそれらを押し下げます。.logoand.social mediaは間違った場所にありますが、and を使用しposition:relativeてtop:/*some value*/これを修正できます。

これを行った後、サイトはFirefoxとChromeの両方で現在のFirefoxバージョンのように見えるはずです. 次に、ロゴやソーシャル メディアで行ったように、相対位置を使用してページの本体を上に移動できます。

最初に安全な場所でこれをテストすることを忘れないでください!

お役に立てれば。

于 2013-07-13T14:36:57.253 に答える