CSS中的隐藏字符

时间:2012-07-18 09:05:34

标签: css

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

我真的很惊讶;我发布它,如果它可以帮助某人。

这个隐藏的角色就在蓝色的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>

2 个答案:

答案 0 :(得分:5)

该字符是UTF-8零宽度空间:e2 80 8b。当CSS解析器到达此字符时,它将停止读取该文件。

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

答案 1 :(得分:2)

尝试了很多事情之后。我找到两个显示错误的免费编辑:
- TextWrangler:如果我去查看&gt;文字显示&gt;显示隐形它显示一个容易删除的红色¿ - Aptana Studio:在边框处显示红十字,在白色空间中显示一个点。

我仍然不知道这个空格出现的方式或原因。对我来说是一个重要的问题,因为它可能会崩溃一个项目,并且我无法在我当前的编辑器Dreamweaver中看到它,无论我尝试哪个版本。在JsFiddle,Jsbin,CodePen或Dabblet等协作工具中无法检测到此空白区域。

正如我所说,TextWrangler和Aptana是一种易于使用且免费的方式来解决它。如果有人可以告诉另一位编辑或简单的方式为我这样的非专家看到它,那么最好知道。