我遇到了Chrome的奇怪布局问题，这似乎是由源代码中不存在的元素引起的（""代码后直接<body>。）
看一下这个截图： Size of body element
body元素位于页面顶部。然而，页面的第一个内容元素（entries_col）的偏移量约为15px： Offset of first element
当然我已经检查了填充和边距 - 可以通过手动删除DOM Inspector中的“”元素（第二个屏幕截图中的红色圆圈）来解决问题。 我发现Chrome显示带引号的空白，但源代码如下所示：
</head><body><div id="entries_col">
有人可以告诉我如何摆脱页面内容上方的空行吗？ （或者：“”来自哪里？）
谢谢！
答案 0 :(得分：1)
好的，所以我找到了问题的原因。这是我用于此Web应用程序的Java Play Framework，但我想不到这会导致我的问题。
标题代码来自单独的文件（Scala视图模板），插入方式如下：
<head>
<title>Logbook</title>
@logbookContent.header()
</head>
虽然标题中的<meta>和<script>标记之间不存在任何文本字符，但HTML验证程序始终在<title>元素之外的标题部分中抱怨文本而不显示任何无效字符文本（感谢Felix Kling提供的验证提示）。
所以我尝试将标题代码直接移动到主页面，而不是在该位置呈现另一个文件。 Etvoilà，它有效。 Chrome中没有更多“”，页面布局如预期。
为了找到将标题代码放入我的页面的艺术之间的区别，我保存了两个（渲染的）网站并将它们上传到两个不同的Diff工具。两者都没有表现出任何差异。但后来我在一个Diff工具的输出中看到了一些奇怪的字符，导致Chrome插入“”：
<head><title>Logbook</title><meta http-e
很明显，渲染引擎确实插入了一些在Chrome或Notepad ++中不可见的无效（空白）字符，可能是因为它们支持Unicode而在线Diff工具不支持。
更新：这些奇怪的字符是UTF8 BOM，可以使用Notepad ++删除（将编码设置为“无BOM的UTF8”）