Question

花了很多时间来弥补这个错误，我希望有人能够回答导致它的原因，所以我希望永远不会再次处理它。

我正在为我正在构建的网站编写原始CSS，并使用psuedo-elements分别向某些页面的顶部和底部添加向上和向下指向的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);
}

我认为这会相对简单，但我一直在向下看着面向下方的雪佛龙错过了右半边，就像这样：

http://jsfiddle.net/h3yqhhxc/1/

你可以在jsfiddle上看到它，在#chevronUp:after选择器（在#chevronDown:after右括号上）关闭括号后，还有一个讨厌的小零宽度空格字符。< / p>

原来这些东西很难删除。

我使用Sublime Text 2并在SO上找到了一个有效的脚本here，但是我不想让我的文本编辑器在每次击键后都运行一个额外的插件。

所以我尝试了一些hacky行为并最终得到了这个，我假设，通过删除零宽度空间影响其后面的选择器：

#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/

但是那里必须有一个更好的答案吗？这些零宽度空间在哪里添加/如何阻止？

Answer 1

这是一个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}。将“替换为”字段留空，然后选择.*正则表达式按钮，“自动换行”按钮和“突出显示匹配”按钮：

U+200B

点击全部替换，你就完全了。

零宽度空间影响样式

1 个答案: