Firefox browser.xul chrome：在工具栏和HTML内容之间添加灰色线条

Question

在最长的时间里，我一直被浏览器工具栏和HTML内容区域之间插入的薄1像素水平灰线所困扰（如果我没记错的话，最新版本和4以后的每个版本），所以我最近开始深入研究browser.xul chrome文件并尝试使用userChrome.css隐藏它。但是，我无法正确找到它或修改它。它似乎并不完全遵循CSS样式的规则，好像（我猜）它在浏览器中的某个地方硬编码而不是可自定义布局的一部分。

这是一个屏幕截图，显示了标准操作过程中的线条（注意：为了清晰起见，我在这里使用'黑色马赛克'外观，但该线条出现时带有任何外观，包括默认值，并且不是当前的一部分页面HTML）。

现在，这是使用userChrome.css中的以下CSS的外观：

toolbox#navigator-toolbox {
    border: 2px solid red !important;
    padding: 12px !important;
}
toolbox#navigator-toolbox > * {
    border: 1px dashed #b0d0f0 !important;
    margin: 4px;
}

灰线响应#navigator-toolbox的12像素填充，但它没有将自己的边框作为#navigator-toolbox的子元素。如果我试图隐藏所有子元素，我会得到以下结果：

toolbox#navigator-toolbox {
    border: 2px solid red !important;
    padding: 12px !important;
}
toolbox#navigator-toolbox > * {
    display: none !important;
}

我也尝试检查它是否是工具栏附近其他元素的背景颜色或边框颜色，我也尝试了所有<hr>元素的样式（它似乎不是那些）。我做错了什么并在这里调查错误的小巷，或者这是Firefox的一个错误/已知的奇怪行为？

Answer 1

这是一个棘手的问题，即使DOM Inspector我也无法弄清楚这条线的来源。但是，如果我将工具箱元素的ID更改为不同的ID并添加style="-moz-appearance: none"（此样式通常应用于导航工具箱），则该行消失 - 因此它必须是应用于#navigator-toolbox的某种样式。然后我直接查看browser.css并立即找到the source of the problem：

#navigator-toolbox::after {
  content: "";
  display: -moz-box;
  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
  height: 1px;
  background-color: ThreeDShadow;
}

所以 - 是的，这不是工具箱的子项，它是一个伪元素（因此在DOM Inspector中不可见）。像这样的用户样式应该删除行：

#navigator-toolbox::after {
  display: none !important;
}

如果“关闭顶部的标签”已关闭，则默认主题已应用此样式。