Chrome Inspector 中奇怪的“”元素导致布局问题答案

【问题标题】：Strange "" element in Chrome Inspector causes layout problemsChrome Inspector 中奇怪的“”元素导致布局问题
【发布时间】：2014-05-27 17:19:17
【问题描述】：

我在使用 Chrome 时遇到了一个奇怪的布局问题，这似乎是由源代码中不存在的元素引起的（"" 直接在 <body> 标记之后）。

看看这个截图： Size of body element

body 元素位于页面顶部。然而页面的第一个内容元素 (entries_col) 有大约 15px 的偏移量： Offset of first element

当然，我已经检查了填充和边距 - 可以通过手动删除 DOM Inspector 中的“”元素来解决问题（第二个屏幕截图中的红色圆圈）。我发现 Chrome 显示带引号的空格，但源代码如下所示：

</head><body><div id="entries_col">

有人可以告诉我如何摆脱页面内容上方的这个空行吗？（或者：“”从何而来？）

谢谢！

【问题讨论】：

FWIW，样式表links 在body 中无效。他们必须进入head。
它们在头部 - Chrome 只是将它们显示为正文的一部分，不要问我为什么... 之后的代码与之前发布的完全相同（复制和粘贴；-) )
“它们在头部 - Chrome 只是将它们显示为正文的一部分” 您的 HTML 可能无效，导致浏览器对此进行补偿并创建一个不同的DOM结构。这可能也是" " 问题的来源。虽然没有看到实际的 HTML，这只是一个有根据的猜测。
感谢您的提示，实际上存在一些验证错误，但这并没有导致问题。这是使用的模板引擎（Java Play Framework）的问题

【解决方案1】：

好的，所以我找到了问题的原因。这是我用于此 Web 应用程序的 Java Play 框架，但我想不出这会导致我的问题。

标头代码来自一个单独的文件（Scala View Template），插入如下：

<head>
    <title>Logbook</title>
    @logbookContent.header()
</head>

尽管标题中的<meta> 和<script> 标记之间确实不存在任何文本字符，但HTML 验证器总是抱怨标题部分中<title> 元素之外的文本没有显示任何无效文本（感谢Felix Kling用于验证提示）。

所以我尝试将标头代码直接移动到主页中，而不是在该位置呈现另一个文件。等等，它的工作原理。 chrome 中不再有“”，页面布局符合预期。

为了找出将标题代码放入我的页面的艺术之间的区别，我保存了两个（渲染的）网站并将它们上传到两个不同的 Diff 工具。两者都没有表现出任何差异。但后来我在一个 Diff 工具的输出中看到了一些奇怪的字符，导致 Chrome 插入“”：

<head><title>Logbook</title>ï»¿<meta http-e

很明显，渲染引擎确实插入了一些在 Chrome 或 Notepad++ 中不可见的无效（空白）字符，可能是因为它们支持 Unicode 而在线 Diff 工具不支持。

更新：这些奇怪的字符是 UTF8 BOM，可以用 Notepad++ 删除（将编码设置为“UTF8 without BOM”）

【讨论】：