为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

the text on tabs with long titles are sent to the next line down, and the close tab 'x' is moved to the end of whatever it says.

  • 10 个回答
  • 1 人有此问题
  • 8 次查看
  • 最后回复者为 boshk11

more options

the text on tabs with long titles are sent to the next line down, and the close tab 'x' is moved to the end of whatever it says. instead of remaining in the right corner of the tab after updating to 72.0.1.

the text on tabs with long titles are sent to the next line down, and the close tab 'x' is moved to the end of whatever it says. instead of remaining in the right corner of the tab after updating to 72.0.1.
已附加屏幕截图

所有回复 (10)

more options

Are you using code in userChrome.css that no longer works properly that could cause this ?

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
more options

huh, i guess you guys broke that too. everything on the add-ons page is in a small window in the corner.

more options

No problems here with the tabs and with about pages.

Did you try Firefox Safe Mode ?

more options

yes. the only thing safemode does is move the tabs to the top again. i mean, who the heck wants the tabs on top anyways?!

more options

Do you have other code in userChrome.css apart from moving the tabs to the bottom ?

It is quite likely that there is some code that is broken causing this issue.

Can you post your current content of userChrome.css ?

more options
@import url("tabs-on-bottom.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* 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;
}

/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {

    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }

.tabbrowser-tab {
    box-sizing: border-box;
    margin: 0 1px 0 1px !important;
    border-radius: 10px 10px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
    color: black !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
    color: black !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
    border: 1px solid gray !important;  /* color is customizable */
    border-bottom: none !important;
    opacity: 1;
}


.tab-background {
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: black;
    opacity: .1;
}

由cor-el于修改

more options

here is the tabs-on-bottom.css


/* no @namespace line in tabs-on-bottom.css */

/* 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 */
/* remainder of CSS code from userChrome.css */

由cor-el于修改

more options

You should also move the code under "/* TABS: height */" to tabs-on-bottom.css and remove it from userChrome.css


/* no @namespace line in tabs-on-bottom.css */

/* 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;
}
more options

so, unfortunately my computer at home updated without permission. it has the same exact problem. even if there is no .css file in the chrome folder the text is all messed up on the tabs. the only code in the .css on this computer is:

/* TABS: on bottom */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
  2. TabsToolbar {-moz-box-ordinal-group:1000!important}
  1. TabsToolbar {
display: block !important; /*required for 71+*/
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

  1. tabbrowser-tabs {
 width: 100vw !important;

}

  1. 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;

}

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

}

  1. tabbrowser-tabs,
  2. 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 */

  1. navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
 padding-bottom: unset !important;

}

  1. navigator-toolbox[movingtab] #tabbrowser-tabs {
 padding-bottom: unset !important;
 margin-bottom: unset !important;

}

  1. navigator-toolbox[movingtab] > #nav-bar {
 margin-top: unset !important;

}

/* Colored bookmark sidebar, toolbar, menu button containers */

 /* Standard folder */
 #bookmarks-view treechildren::-moz-tree-image(container),
 #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
   fill: gold !important;
 }
 /* Live Bookmark (RSS Feed) */
 #bookmarks-view treechildren::-moz-tree-image(container, livemark),
 #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
   fill: orange !important;
 }
 /* Smart bookmark folder */
 #bookmarks-view treechildren::-moz-tree-image(container, query),
 #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
   fill: dimtan !important;
 }
 /* These "containers" are SVG in the sidebar, not yet on the menu */
 #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
   fill: tan !important;
 }
 #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
   fill: tan !important;
 }
 #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
   fill: tan !important;
 }
more options

could the problem ultimately be that there is some bug or issue that was created when upgrading from a pre-quantum version of firefox? at least on my home computer the original install was something like 2015. my work computer probably 2017 or 2018. at any rate, i reinstalled firefox fresh. i am using the same extensions and chrome.css file and the issue has gone away.