空间出现在Firefox上，但不是Chrome？答案

【问题标题】：Space appearing on firefox, but not chrome?空间出现在Firefox上，但不是Chrome？
【发布时间】：2015-08-14 09:52:29
【问题描述】：

伙计们。

今天，我决定安装 firefox 并在 firefox 而不是 google chrome 上测试我的导航栏。 Firefox 在顶部显示一个随机空间，而 chrome 则没有。有谁知道问题是什么以及如何解决？

这是 Firefox 与 chrome 相比的样子。（抱歉质量不好，我调整了它的大小。）

如果重要的话，这是我正在使用的代码：

<html>

<head>
<title>Blitz</title>

<style>
body{
margin: 0px;
padding:0px;
}

.Blitz{
background-color:#2DDEDE;
padding:0px;
margin:0px;
border-color:black;
}

.Navigationbar{
height:40px;
width:500px;
background:#a7e8ee;
border:none;
}


.Navigationbar li{
display:inline;

}


.Navigationbar a{
color:black;
text-decoration:none;
}
</style>

</head>

<body>


<div class="Blitz">
<h1><center>Blitz</center></h1>
<ul>
<div class="Navigationbar">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Featured</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>

<div class="information">
<!--Information about the site here. Pictures to go with that-->

</div>

</body>

</html>

【问题讨论】：

您是否尝试过使用CSS reset？所有浏览器都有不同的默认边距/填充/等。
HTML 和 CSS 实际上看起来还不错，我唯一能想到的可能是 Firefox 正在读取开始的 body 标签和开始的 Blitz div 标签之间的空白。如果你把那些回车去掉有帮助吗？此外，将打开的“ul”标签与“div.Navigationbar”标签交换，它没有正确嵌套。
@Eraph 这实际上不是空格问题 - 有关详细信息，请参阅我的答案。

标签： html css google-chrome firefox

【解决方案1】：

出现此问题是因为您的页眉的顶部边缘突出了您的 div 的顶部，而不仅仅是由于您的 HTML 中的换行符或空白。

为防止标题元素的边距超出 div 顶部并影响定位，请在 .Blitz 元素上使用 overflow: auto;。

JSFiddle 示例：https://jsfiddle.net/9676k73g/

【讨论】：

【解决方案2】：

尝试去掉导航栏上的换行符，以便将其全部放在 HTML 中的一行中。它可能看起来很乱，但我过去发现，仅仅因为 HTML 的格式很好，就会在某些浏览器中呈现令人讨厌的空间。

【讨论】：