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

我的猜测是您的媒体查询。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;
}

score 1 · Accepted Answer

您的重置样式表应该在您的主样式表之前。

只需交换它们，看看是否有帮助。

3 回答 3