元素在不同浏览器上的位置略有不同？

Question

在我的网站上，我的#header和#nav的高度在chrome / safari中看起来与firefox不同，我有一个重置css，并且一直在努力发现这个微小但非常烦人的差异的原因。也许我需要一个新鲜的眼睛来帮助我看到它。

http://kimcolemanprojects.com/index.html

任何想法都非常感激。

angela

Answer 1

浏览器自动添加边距和填充

尝试将以下代码添加到您的css中：

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

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

为每个h标记添加该标记 顺便说一下，你的网站看起来很棒;）

Answer 2

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

Answer 3

您的重置样式表应位于主样式表之前。

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