1

長い間、FirefoxがブラウザのツールバーとHTMLコンテンツ領域の間に挿入する細い1ピクセルの水平の灰色の線に悩まされてきました（最新バージョンで、正しく思い出せば、4以降のほぼすべてのバージョン）。最近、browser.xulchromeファイルの調査を開始し、を使用して非表示にしようとしましたuserChrome.css。しかし、私はそれを適切に見つけたり修正したりすることができませんでした。CSSスタイルの規則に完全には従わないようです。まるで（おそらく）ブラウザーのどこかにハードコーディングされており、カスタマイズ可能なレイアウトの一部ではないかのようです。

これは、標準操作中の線を示すスクリーンショットです（注：わかりやすくするために、ここでは「ブラックモザイク」の外観を使用していますが、線はデフォルトを含むすべての外観で存在し、現在のページのHTMLの一部ではありません） 。

Firefoxの灰色の線

これが、次のCSSを使用した外観ですuserChrome.css。

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

変更されたFirefoxクローム

灰色の線は、の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

これは難しい質問です。DOMInspectorを使用しても、この行がどこから来ているのかを理解するのに苦労しました。ただし、ツールボックス要素の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 に答える