我只是花了两个多小时的故障排除了一个看似简单的HTML问题。当我复制并粘贴了一小部分HTML时，Web浏览器会从原始浏览到新的截面。某些元素之间的水平间距略有不同，导致整个页面看起来不对劲。但这怎么可能？这两个HTML部分是相同的 - 新的部分实际上是旧的副本。
这个简单的探测问题藐视我所有的尝试解释它。我想出了许多伟大的理论：我的CSS课程或利润和填充物的问题。不匹配的HTML标记。浏览器错误。我尝试了三个不同的浏览器，并在所有浏览器中得到了相同的结果。
感到非常困惑，我再次在Wordpress编辑器（文本视图）中的HTML的两部分看看，并确认它们完全相同。然后我尝试了Firefox的内置Web开发人员工具，以查看页面的渲染元素，并比较所有CSS属性。相同 - 但不知何故，他们渲染不同。我使用开发人员工具来检查从我的Web服务器接收的确切HTML，再次选中这两个部分，并验证了它们是字符相同的字符。 Firefox的“页面来源”工具还确认了两部分完全相同。
到这一点，我准备责备宇宙射线或伏都教魔法。我发现任何时候我都复制了任何类似的HTML部分，那么新的粘贴部分将出现在浏览器中，具有错误的元素间距。这可能是怎么样的？然后，我尝试了W3C验证器，它发现了我的页面的一些其他问题，但没有任何可以解释这种行为。再一次，它确认，尽管在浏览器中呈现不同，但HTML的两部分是相同的。
显然有些东西没有加起来。我用卷曲从我的Web服务器下载网页，查看本地副本，并看到了与以前相同的行为。但是当我用十六进制编辑器打开存储的.html文档时，我终于答案了。 HTML的两部分不相同：一个部分使用了另一个不同类型的空间字符。
我发现原始的HTML部分包含了不破坏的空间。但不是用＆amp; nbsp编码它们;实体，它们直接编码为Unicode字符C2A0。我不确定这是怎么发生的，但我责怪WordPress。在WordPress HTML Editor中查看此部分时，C2A0空间出现类似于普通空格，并复制编辑器内的部分静默转换为具有十六进制值20的正常空间。因此，即使是呈现的复制版本源HTML似乎是相同的。
这就像21世纪版本的混淆零，大写字母o，但更糟糕。我甚至不知道未破坏的空间有一个unicode字符值 - 我认为＆amp; nbsp;是编码它们的唯一方法。我将HTML恢复到了使用＆amp; nbsp;现在这一切都适用。
我很惊讶于如何在HTML源中的空间类型之间揭示这种微妙但是重要的区别。 WordPress HTML编辑器无法显示或正确处理差异。 Firefox Web开发人员工具和页面源工具失败。 W3C验证器的源视图失败。 卷曲加一个十六进制编辑器是最终建立关于HTML源的精确内容的地面真实的唯一方法。 阅读6条评论并加入对话