為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Tab titles and close button missing (Firefox 72)

  • 5 回覆
  • 1 有這個問題
  • 4 次檢視
  • 最近回覆由 cor-el

I had an update to Firefox 72 today which required messing around with the Chrome.css code again to get my tabs back below the searchbar. I followed the advice on this page: https://support.mozilla.org/en-US/questions/1274416?page=2 , but the format of the tabs is now a complete mess. As the image below shows, text is set awkwardly below the page icon rather than in-line, or set below view if it's over a certain length. The closs button is also set slightly above, rather than in-line with text and is missing altogether depending on the length of text. This is also the case when I remove the .CSS code to reset the tabs to above the searchbar. Any help would be much appreciated.

I had an update to Firefox 72 today which required messing around with the Chrome.css code again to get my tabs back below the searchbar. I followed the advice on this page: https://support.mozilla.org/en-US/questions/1274416?page=2 , but the format of the tabs is now a complete mess. As the image below shows, text is set awkwardly below the page icon rather than in-line, or set below view if it's over a certain length. The closs button is also set slightly above, rather than in-line with text and is missing altogether depending on the length of text. This is also the case when I remove the .CSS code to reset the tabs to above the searchbar. Any help would be much appreciated.
附加的畫面擷圖

由 OrangeMelon 於 修改

所有回覆 (5)

You probably have other code in userChrome.css that is causing this issue. From the screenshot it may seem that the title is push down and thus appears below the Tab bar and is not visible.

Do you have other code that deals with the tab bar or text in individual tabs?

Hi Cor-el!

This is the full code I'm using:

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 display: block !important; /*required for 71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 27px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

I'm no expert in userChrome.css and have mostly done what others have suggested, coupled with a bit of trail and error (read - I don't know what I'm doing!)

由 cor-el 於 修改

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

This code probably won't work properly because shadow DOM is used for the tabs (you can't cross a shadow DOM barrier).

You can try this code (not tested):

#tabbrowser-tabs,
.tabbrowser-arrowscrollbox,
.tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

Much appreciated, but sadly no better. It seems odd that the problem persists even when I remove all userChrome.css code and revert back to tabs on top.

You can start Firefox in Safe Mode to check if one of the extensions ("3-bar" menu button or Tools -> Add-ons -> Extensions) or if hardware acceleration is causing the problem.

  • switch to the DEFAULT theme: "3-bar" menu button or Tools -> Add-ons -> Themes
  • do NOT click the "Refresh Firefox" button on the Safe Mode start window

You can also try different Density settings in customize mode.