css - 影响样式的零宽度空间

Question

我花了很生气的时间来解决这个错误，我希望有人能回答是什么导致了它，这样我就再也不会处理它了。

我正在为我正在构建的网站编写原始 CSS，并使用伪元素分别在某些页面的顶部和底部添加向上和向下指向的 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 右括号)。

原来这些东西很难删除。

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

所以我尝试了一些 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)。每次修改当前 View 时，它都会逐个字符地搜索零宽度空格字符。如果找到一个，它会将位置添加到列表中并继续查找，直到到达文件末尾。然后，如果找到任何字符，它们将根据主题中的 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，它应该会立即开始工作。您可以通过选择 Preferences -> Browse Packages... 菜单选项找到您的 Packages 目录。

---

一旦您确定您的文件包含 U+200B 字符，您可以使用正则表达式查找和替换轻松删除它们。选择 Find -> Replace...，然后在“Find What”字段中输入 \x{200b}。将“替换为”字段留空，然后选择 .* Regular Expression 按钮、Wrap 按钮和 Highlight Matches 按钮:

点击全部替换，一切就绪。