只是花了很长时间才能解决此错误,并希望有人对导致该错误的原因有一个答案,所以我希望永远不要再处理它。
我正在为正在构建的网站编写原始CSS,并且正在使用psuedo元素将向上和向下指向的V形符号分别添加到某些页面的顶部和底部。
#chevronUp {
position: fixed;
left:50%;
top:5%;
text-align: center;
padding: 0px;
margin-bottom: 0px;
height: 8px;
width: 100px;
}
#chevronDown {
position: fixed;
left:50%;
bottom:5%;
text-align: center;
padding: 0px;
margin-bottom: 0px;
height: 8px;
width: 100px;
z-index:10;
}
#chevronUp:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #3c3f44;
-webkit-transform: skew(0deg, -35deg);
-moz-transform: skew(0deg, -35deg);
-ms-transform: skew(0deg, -35deg);
-o-transform: skew(0deg, -35deg);
transform: skew(0deg, -35deg);
}
#chevronDown:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #3c3f44;
-webkit-transform: skew(0deg, 35deg);
-moz-transform: skew(0deg, 35deg);
-ms-transform: skew(0deg, 35deg);
-o-transform: skew(0deg, 35deg);
transform: skew(0deg, 35deg);
}
#chevronUp:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #3c3f44;
-webkit-transform: skew(0deg, 35deg);
-moz-transform: skew(0deg, 35deg);
-ms-transform: skew(0deg, 35deg);
-o-transform: skew(0deg, 35deg);
transform: skew(0deg, 35deg);
}
#chevronDown:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #3c3f44;
-webkit-transform: skew(0deg, -35deg);
-moz-transform: skew(0deg, -35deg);
-ms-transform: skew(0deg, -35deg);
-o-transform: skew(0deg, -35deg);
transform: skew(0deg, -35deg);
}
我以为这会相对简单,但我一直以朝下的V形结尾缺少右半部分的方式结束,如下所示:
http://jsfiddle.net/h3yqhhxc/1/
您可以在jsfiddle上看到它,在
#chevronUp:after
选择器上的括号(在#chevronDown:after
上的括号也是如此)之后,有一个令人讨厌的零宽度空格字符挂出。事实证明,这些东西很难删除。
我正在使用Sublime Text 2,并在SO上找到了一个脚本here,该脚本可以正常工作,但我不想让我的文本编辑器在每次击键后都运行一个额外的插件。
因此,我尝试了一些骇人听闻的行为,并最终解决了这个问题,我认为是通过消除零宽度空间来影响选择器之后的选择器,该方法可以正常工作:
#chevronUp:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #3c3f44;
-webkit-transform: skew(0deg, 35deg);
-moz-transform: skew(0deg, 35deg);
-ms-transform: skew(0deg, 35deg);
-o-transform: skew(0deg, 35deg);
transform: skew(0deg, 35deg);
}{} <------Note the extra brackets
http://jsfiddle.net/yfm9c5fz/
但是有比这更好的答案了吗?这些零宽度空格将添加到哪里/如何停止它?
最佳答案
这是Sublime Text 3特定的插件,该插件异步运行,以寻找零宽度空格的实例(Unicode代码点\u200b
)。每次修改当前视图时,都会逐字符搜索整个视图,以查找零宽度空格字符。如果找到一个,它将位置添加到列表中,并一直查找直到到达文件末尾。然后,如果找到任何字符,则会根据主题中的invalid
范围突出显示它们。一旦突出显示,就可以选择和删除它们。由于它是异步运行的,因此您在编辑时不应看到任何性能下降。
在Sublime中打开一个新文件,并将其语法设置为Python。将以下内容粘贴到其中:
import sublime_plugin
class ShowZeroWidthSpace(sublime_plugin.EventListener):
def on_modified_async(self, view):
spaces = []
p = 0
while True:
s = view.find('\u200b', p + 1)
if not s:
break
spaces.append(s)
p = s.a
if spaces:
view.add_regions("zero-width", spaces, "invalid")
else:
view.erase_regions("zero-width")
将文件另存为
Packages/User
在show_zero_width_space.py
目录中,它应立即开始工作。您可以通过选择Packages
菜单选项来找到Preferences -> Browse Packages...
目录。一旦确定文件包含
U+200B
个字符,就可以使用正则表达式查找和替换轻松地删除它们。选择Find -> Replace...
,然后在“查找内容”字段中输入\x{200b}
。将“替换为”字段保留为空白,然后选择.*
正则表达式按钮,“换行”按钮和“突出显示匹配项”按钮:点击全部替换,一切就绪。
关于css - 零宽度空间影响样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25375904/