CSS中的隐藏字符 [英] Hidden characters in CSS

问题描述

我花了几个小时的代码无法正常工作，我找不到问题.我简化了查找问题的过程.最后，我找到了一个隐藏的角色，这个角色我看不见，但却使所有事情出错.

I have been hours with a code that did not work and I could not find the problem. I simplified the problem to find it. At the end I find a hidden character, a character I could not see but makes everything goes wrong.

我真的很惊讶；我发布它是否可以帮助某人.

I'm really surprised; I publish it if it could help someone.

这个隐藏的字符紧跟在蓝色CSS之后，使后面的所有内容都不可见.如果有人删除了该空间，则红色变为可见！

This hidden character is just after the blue css and makes everything behind invisible. If anyone deletes that space, the red becomes visible!

我将其发布在三个地方.您会看到这个令人惊讶的问题:

I publish this in three places. You can see this surprising problem:

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

对我来说，这真是令人震惊.我已经花了很多小时才能找到这个.有谁知道为什么会这样吗?无论如何，有什么办法可以使这些破坏一切的隐藏角色变得可见?

For me this is really shocking. I've been so many hours to find this. Does anyone know why this happens? Is there anyway to make visible these hidden characters that destroy everything?

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>

推荐答案

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

The character is a UTF-8 zero-width space: e2 80 8b. When the CSS parser reaches this character, it stops reading the file.

解决方案是仅将它们放在第一位.它们作为CSS的一部分无效.如果有现有文件需要删除，则可以使用十六进制编辑器打开文件以标识其位置.

The solution is just to not put these in in the first place. They aren't valid as part of CSS. If you have existing ones you need to remove, you can open the file with a hex editor to identify their positions.

这篇关于CSS中的隐藏字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！