当空间不是空间时

2021-06-17 15:41:09

我只是花了两个多小时的故障排除了一个看似简单的HTML问题。当我复制并粘贴了一小部分HTML时,Web浏览器会从原始浏览到新的截面。某些元素之间的水平间距略有不同,导致整个页面看起来不对劲。但这怎么可能?这两个HTML部分是相同的 - 新的部分实际上是旧的副本。

这个简单的探测问题藐视我所有的尝试解释它。我想出了许多伟大的理论:我的CSS课程或利润和填充物的问题。不匹配的HTML标记。浏览器错误。我尝试了三个不同的浏览器,并在所有浏览器中得到了相同的结果。

感到非常困惑,我再次在Wordpress编辑器(文本视图)中的HTML的两部分看看,并确认它们完全相同。然后我尝试了Firefox的内置Web开发人员工具,以查看页面的渲染元素,并比较所有CSS属性。相同 - 但不知何故,他们渲染不同。我使用开发人员工具来检查从我的Web服务器接收的确切HTML,再次选中这两个部分,并验证了它们是字符相同的字符。 Firefox的“页面来源”工具还确认了两部分完全相同。

到这一点,我准备责备宇宙射线或伏都教魔法。我发现任何时候我都复制了任何类似的HTML部分,那么新的粘贴部分将出现在浏览器中,具有错误的元素间距。这可能是怎么样的?然后,我尝试了W3C验证器,它发现了我的页面的一些其他问题,但没有任何可以解释这种行为。再一次,它确认,尽管在浏览器中呈现不同,但HTML的两部分是相同的。

显然有些东西没有加起来。我用卷曲从我的Web服务器下载网页,查看本地副本,并看到了与以前相同的行为。但是当我用十六进制编辑器打开存储的.html文档时,我终于答案了。 HTML的两部分不相同:一个部分使用了另一个不同类型的空间字符。

我发现原始的HTML部分包含了不破坏的空间。但不是用& nbsp编码它们;实体,它们直接编码为Unicode字符C2A0。我不确定这是怎么发生的,但我责怪WordPress。在WordPress HTML Editor中查看此部分时,C2A0空间出现类似于普通空格,并复制编辑器内的部分静默转换为具有十六进制值20的正常空间。因此,即使是呈现的复制版本源HTML似乎是相同的。

这就像21世纪版本的混淆零,大写字母o,但更糟糕。我甚至不知道未破坏的空间有一个unicode字符值 - 我认为& nbsp;是编码它们的唯一方法。我将HTML恢复到了使用& nbsp;现在这一切都适用。

我很惊讶于如何在HTML源中的空间类型之间揭示这种微妙但是重要的区别。 WordPress HTML编辑器无法显示或正确处理差异。 Firefox Web开发人员工具和页面源工具失败。 W3C验证器的源视图失败。 卷曲加一个十六进制编辑器是最终建立关于HTML源的精确内容的地面真实的唯一方法。 阅读6条评论并加入对话