CSS中的隐藏字符答案

【问题标题】：Hidden characters in CSSCSS中的隐藏字符
【发布时间】：2012-09-01 22:42:28
【问题描述】：

我已经用了几个小时的代码无法正常工作，但我找不到问题所在。我简化了问题以找到它。最后我找到了一个隐藏的角色，一个我看不见但让一切都出错的角色。

我真的很惊讶；如果它可以帮助某人，我会发布它。

这个隐藏的字符就在蓝色 css 之后，使后面的一切都变得不可见。如果有人删除该空间，红色就会变得可见！

我在三个地方发表了这篇文章。你可以看到这个令人惊讶的问题：

http://codepen.io/anon/pen/riKkn
http://dabblet.com/gist/3135074
http://jsbin.com/exokub/edit#html,live

对我来说，这真的很令人震惊。我找了这么多小时。有谁知道为什么会这样？有没有办法让这些破坏一切的隐藏角色可见？

CSS：

#blue {position: absolute;width: 200px; height:100px;top: 50px;left: 150px; background-color: blue;}

#red {position: absolute; width: 200px; height:100px;top: 200px;left: 150px; background-color:red;}

HTML：

<div id="blue"></div>
<div id="red"></div>

【问题讨论】：

标签： css

【解决方案1】：

该字符是一个 UTF-8 零宽度空格：e2 80 8b。当 CSS 解析器到达这个字符时，它会停止读取文件。

解决方案就是不要把这些放在首位。它们作为 CSS 的一部分无效。如果您有需要删除的现有文件，可以使用十六进制编辑器打开文件以识别它们的位置。

【讨论】：

我正在使用 UTF-8 字符编码，我可以将字符视为一个框。我选择它、复制它、粘贴它、删除它。
@Different55 这意味着您的编辑器识别了它并添加了框本身，或者您使用的字体没有定义该代码点。
对不起，我不明白。我使用带有的 Dreamweaver，但我没有看到它。我尝试了 TextWrangler、Aptana Studio，但没有看到。我尝试了 codepen、dabblet、jsbin，但我没有看到它。我不知道我是怎么生成的，也不知道怎么看。
CSS 中允许使用零宽度空格 (ZWSP) 字符，它们不会终止读取文件。这里的问题是 ZWSP 出现在规则之间，它会导致语法错误，并且某些规则会因为格式错误而被忽略。这类似于在规则之间使用“§”。 ZWSP（和“§”）仅在 CSS 中允许在带引号的字符串中。
@JukkaK.Korpela 是的。我应该澄清一下，它们作为 CSS structure 的一部分是无效的，并且解析器由于语法错误而停止查找。当然，这些字符可以用于某些属性的值中。

【解决方案2】：

在尝试了很多事情之后。我找到了两个显示错误的免费编辑器：
- TextWrangler：如果我去查看>文本显示>显示不可见，它会显示一个易于删除的红色¿。
- Aptana Studio：在边界显示一个红十字，在空白处显示一个点。

我仍然不知道这些空白是如何或为什么出现的。对我来说这是一个重要的问题，因为它可以折叠一个项目，并且无论我尝试哪个版本，都无法在我当前的编辑器 Dreamweaver 中看到它。在 JsFiddle、Jsbin、CodePen 或 Dabblet 等协作工具中都无法检测到此空白。

正如我所说，TextWrangler 和 Aptana 是一种易于使用且免费的解决方法。如果有人可以告诉其他编辑或像我这样的非专家查看它的简单方法，那就太好了。

【讨论】：