1

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

这是标准操作期间显示线条的屏幕截图（注意：为了清楚起见，我在此处使用“黑色马赛克”外观，但该线条以任何外观呈现，包括默认外观，并且不是当前页面 HTML 的一部分） .

火狐灰线

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

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

修改后的火狐浏览器

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

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

隐藏的 Firefox 工具栏镶边

我还尝试检查它是否是工具栏附近涉及的其他元素的背景颜色或边框颜色，并且我也尝试设置所有<hr>元素的样式（它似乎也不是其中之一）。我是在做完全错误的事情并在这里调查错误的小巷，还是这是 Firefox 的错误/已知奇怪行为？

4

1 回答 1

2

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

#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;
}

如果关闭“顶部选项卡”，默认主题已经应用此样式。

于 2012-05-24T05:50:25.403 回答