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

Question

很长一段时间以来，我一直被 Firefox 在浏览器工具栏和 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;
}

如果“Tabs on Top”关闭，默认主题已应用此样式。