css - ブラウザによって要素の位置が少し異なりますか？

Question

私のサイトでは、＃headerと#navの高さがchrome / safariとfirefoxで異なって見えます。私は、リセットされたcssを持っており、この小さな、しかし非常に厄介な不一致の理由を見つけようとしています。多分私はそれを見るのを助けるために誰かの新鮮な目が必要です。

どんなアイデアでも大歓迎です。

アンジェラ

score 2 · Accepted Answer

ブラウザはマージンとパディングを自動的に追加します

CSS に次のコードを追加してみてください。

body {
   margin: 0px;
   padding: 0px;
}

h1 {
   margin: 0px;
   padding: 0px;
}

hちなみに、各タグ
にあなたのウェブサイトが見栄えがすることを追加してください;）

score 1 · Accepted Answer

リセットスタイルシートは、メインスタイルシートの前に配置する必要があります。

それらを交換して、それが役立つかどうかを確認してください。

score 1 · Accepted Answer

私の推測では、あなたのメディアクエリでしょう。Chrome はメディアクエリをロードしていますが、FireFox はロードしていません。これを頭に追加してみて、問題が解決するかどうかを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これは Firefox で表示されます

#header {
    line-height: 24px;
    margin: 8px 20px;
    position: fixed;
    width: 50%;
}

そして、これはChromeで

@media only screen and (min-width: 701px)
#header {
position: fixed;
width: 50%;
margin: 8px 20px;
line-height: 24px;
}

3 に答える 3