如何在Firefox中實現(xiàn)垂直標(biāo)簽頁? 火狐瀏覽器垂直標(biāo)簽頁設(shè)置方法
發(fā)布時間：2025-03-05 09:37:02 作者：佚名 
我要評論
我要評論Firefox默認(rèn)的標(biāo)簽頁是水平顯示的，但有一個方法可以將它們轉(zhuǎn)換為垂直顯示，下面我們就來看看設(shè)置方法
如何在Firefox中實現(xiàn)垂直標(biāo)簽頁：改變你的瀏覽體驗
經(jīng)常用Microsoft瀏覽器的同學(xué)可能會習(xí)慣于它獨特的豎直標(biāo)簽頁，因為它允許用戶更清楚地看到每個打開的標(biāo)簽頁的標(biāo)題。但是如果你是Firefox的用戶，你可能已經(jīng)知道，F(xiàn)irefox默認(rèn)的標(biāo)簽頁是水平顯示的，但有一個方法可以將它們轉(zhuǎn)換為垂直顯示，大幅改善你的瀏覽體驗。本文將向你展示如何通過使用Tree Style Tab插件以及一些簡單的設(shè)置步驟，輕松實現(xiàn)垂直標(biāo)簽頁。
方法一：
1、安裝sidebery拓展插件
火狐瀏覽器打開 Sidebery – 下載 Firefox 擴(kuò)展（zh-CN）并安裝
2、解鎖userChrome.css
瀏覽器網(wǎng)址輸入 userChrome.css
再輸入 toolkit.legacyUserProfileCustomizations.stylesheets
點一下右邊的按鈕修改為true
3、修改userChrome.css
瀏覽器幫助->更多排障信息->打開配置文件夾
打開后如果文件夾里面沒有 chrome 文件夾就自己創(chuàng)建一個
然后再打開 chrome 文件夾，新建文件，取名為 userChrome.css
里面寫入以下代碼
/* #tabbrowser-tabs[orient="horizontal"] {
visibility: collapse !important;
} */
:root {
/* Delay before expanding tabs */
--delay: 0s;
/* Time it takes for sidebar to expand. */
--transition-time: 0.2s;
/* Width of expanded sidebar */
--expanded-width: 250px;
}
#TabsToolbar:not([customizing="true"]) {
visibility: collapse !important;
}
@media (-moz-platform: macos) {
:root:not([customizing="true"]) #nav-bar:not([inFullscreen]) {
padding-left: 80px !important;
}
:root:not([customizing="true"]) #TabsToolbar .titlebar-buttonbox-container {
visibility: visible !important;
position: absolute;
top: 12px;
left: 0px;
display: block;
}
}
/* Linux/GTK specific styles */
@media (-moz-gtk-csd-available),
(-moz-platform: linux) {
.browser-toolbar:not(.titlebar-color) {
/* Fixes wrong coloring applied with --toolbar-bgcolor by Firefox (#101) */
background-color: transparent !important;
box-shadow: none !important;
}
#TabsToolbar:not([customizing="true"]) {
visibility: collapse !important;
}
#toolbar-menubar {
padding-top: 0px !important;
}
/* Fixes issue in FF 123 where minimize, close, and maximize buttons no longer work. */
:root[tabsintitlebar] #titlebar {
will-change: auto !important;
}
:root:not([customizing="true"]) #toolbar-menubar[inactive]+#TabsToolbar .titlebar-buttonbox-container {
visibility: visible !important;
position: absolute;
top: var(--uc-win-ctrl-vertical-offset);
display: block;
z-index: 101;
}
/* enable rounded top corners */
:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]):not([customizing="true"]) #nav-bar {
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
}
/* window control padding values (these don't change the size of the actual buttons, only the padding for the navbar) */
:root[tabsintitlebar]:not([customizing="true"]) {
/* default button/padding size based on adw-gtk3 theme */
--uc-win-ctrl-btn-width: 38px;
--uc-win-ctrl-padding: 12px;
/* vertical offset from the top of the window, calculation: (1/2 * (NAVBAR_HEIGHT - BUTTON_HEIGHT)) */
--uc-win-ctrl-vertical-offset: 8px;
/* extra window drag space */
--uc-win-ctrl-drag-space: 20px;
}
:root[tabsintitlebar][lwtheme]:not([customizing="true"]) {
/* seperate values for when using a theme, based on the Firefox defaults */
--uc-win-ctrl-btn-width: 30px;
--uc-win-ctrl-padding: 12px;
/* vertical offset from the top of the window, calculation: (1/2 * (NAVBAR_HEIGHT - BUTTON_HEIGHT)) */
--uc-win-ctrl-vertical-offset: 5px;
/* extra window drag space */
--uc-win-ctrl-drag-space: 20px;
}
/* setting the padding value for all button combinations */
@media (-moz-gtk-csd-minimize-button),
(-moz-gtk-csd-maximize-button),
(-moz-gtk-csd-close-button) {
#nav-bar {
--uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 1);
}
}
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
(-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
(-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
#nav-bar {
--uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 2);
}
}
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
#nav-bar {
--uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 3);
}
}
/* only applies padding/positioning if there is 1 or more buttons */
@media (-moz-gtk-csd-minimize-button),
(-moz-gtk-csd-maximize-button),
(-moz-gtk-csd-close-button) {
/* window controls on the right */
@media not (-moz-gtk-csd-reversed-placement) {
#nav-bar {
padding-inline: 0 calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding) + var(--uc-win-ctrl-drag-space)) !important;
}
.titlebar-buttonbox-container {
right: 0;
}
}
/* window controls on the left */
@media (-moz-gtk-csd-reversed-placement) {
#nav-bar {
padding-inline: calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding) + var(--uc-win-ctrl-drag-space)) 0 !important;
}
.titlebar-buttonbox-container {
left: 0;
}
}
}
/* Hide window buttons in fullscreen */
#navigator-toolbox[style*="margin-top: -"] .titlebar-buttonbox-container,
[inDOMFullscreen="true"] .titlebar-buttonbox-container {
transform: translateY(-100px)
}
}
/* Windows specific styles */
@media (-moz-platform: windows),
(-moz-platform: windows-win10) {
/* Hide main tabs toolbar */
:root[tabsintitlebar] {
--uc-window-control-width: 137px;
}
#nav-bar {
border-inline: var(--uc-window-drag-space-width, 80px) solid var(--toolbar-bgcolor);
border-inline-style: solid !important;
border-right-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-width, 0px));
/* This makes it possible to drag the maximized window. */
padding-top: .5px !important;
/* Removes the space left when hiding .titlebar-buttonbox-container */
margin-left: -80px;
}
#back-button {
margin-top: -.5px !important;
}
#forward-button {
margin-top: -.5px !important;
}
#reload-button {
margin-top: -.5px !important;
}
#PanelUI-button {
margin-top: -.5px !important;
}
#nav-bar-overflow-button {
margin-top: -.5px !important;
}
:root {
--uc-toolbar-height: 32px;
--chrome-content-separator-color: none !important;
}
:root:not([uidensity="compact"]) {
--uc-toolbar-height: 38px;
}
#TabsToolbar {
visibility: collapse !important;
}
/* Hide the Windows controls on the left side. */
#TabsToolbar .titlebar-buttonbox-container {
visibility: hidden !important;
}
/* Line up the Windows controls with the rest of the icons in the toolbar. */
:root:not([sizemode="maximized"]) .titlebar-buttonbox-container {
margin-top: 3px;
}
:root:not([inFullscreen]) #nav-bar {
margin-top: calc(0px - var(--uc-toolbar-height));
z-index: 2;
}
#toolbar-menubar {
min-height: unset !important;
height: var(--uc-toolbar-height) !important;
position: relative;
}
.titlebar-buttonbox {
z-index: 3 !important;
}
.titlebar-buttonbox * {
width: 35px;
height: 38px;
pointer-events: auto;
}
#titlebar {
z-index: 3;
pointer-events: none;
}
#main-menubar {
-moz-box-flex: 1;
background-color: var(--toolbar-bgcolor, --toolbar-non-lwt-bgcolor);
background-clip: padding-box;
border-right: 30px solid transparent;
border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor, --toolbar-non-lwt-bgcolor) 30px) 20 / 30px;
}
#toolbar-menubar:not([inactive]) {
z-index: 2;
}
#toolbar-menubar[inactive]>#menubar-items {
opacity: 0;
pointer-events: none;
margin-left: var(--uc-window-drag-space-width, 0px);
}
:root[inFullscreen] #nav-bar {
border-right: none !important;
}
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
visibility: collapse;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
position: relative;
min-width: 48px !important;
width: 48px !important;
max-width: 48px !important;
z-index: 1;
margin-top: -1px;
transition: min-width var(--transition-time) linear !important;
will-change: min-width;
}
/* positioned=true means sidebar docked to the right */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend="true"] {
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
#browser:has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend="true"])>#appcontent {
margin-right: 50px;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend="true"]:hover {
min-width: var(--expanded-width) !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]>#sidebar {
transition: min-width var(--transition-time) linear var(--delay) !important;
will-change: min-width;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover>#sidebar {
min-width: var(--expanded-width) !important;
transition: min-width var(--transition-time) linear var(--delay);
clip-path: inset(0px -15px 0px -15px);
}
#sidebar,
#sidebar-header {
background-color: var(--toolbar-bgcolor) !important;
border-inline: 1px solid var(--chrome-content-separator-color) !important;
border-inline-width: 0px 1px !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover~#appcontent #statuspanel {
inset-inline: auto 0px !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover~#appcontent #statuspanel-label {
margin-inline: 0px !important;
border-left-style: solid !important;
}4、修改sidebery拓展配置
瀏覽器中打開sidebery的設(shè)置頁面
點擊樣式編輯器
在右邊填入以下代碼
#root.root {
--tabs-font: 10pt sans-serif;
--tabs-count-font: .625rem Segoe UI;
--bookmarks-bookmark-font: .875rem Segoe UI;
--bookmarks-folder-font: 9pt Segoe UI;
--nav-btn-width: 42px;
--nav-btn-height: 42px;
--tabs-height: 40px;
--tabs-inner-gap: 11px;
--tabs-pinned-width: 42px;
--tabs-pinned-height: 42px;
--search-height: 36px;
--search-icon-width: 42px;
}
@media (prefers-color-scheme:light) {
#root {
--tabs-activated-bg: white !important;
--tabs-bg-active: var(--tabs-activated-bg) !important;
--tabs-selected-fg: var(--tabs-activated-fg) !important;
--tabs-selected-bg: var(--tabs-activated-bg) !important;
--bg: #f9f9fb !important;
--badge-bg: rgb(255 255 255 / 0.85);
--border: #606060 !important;
--ctx-menu-separator: rgb(204 204 204);
}
}
@media (prefers-color-scheme:dark) {
#root {
--tabs-activated-bg: #42414d !important;
--tabs-bg-active: var(--tabs-activated-bg) !important;
--tabs-selected-fg: var(--tabs-activated-fg) !important;
--tabs-selected-bg: var(--tabs-activated-bg) !important;
--bg: #2b2a33 !important;
--badge-bg: rgb(30 30 30 / 0.85);
--border: #c0c0c0 !important;
--ctx-menu-separator: rgb(51 51 62);
--tabs-bg-hover: rgb(51 51 62) !important;
}
}
.NavigationBar {
background: transparent;
border-bottom: 1px solid var(--ctx-menu-separator);
}
.NavigationBar[data-layout="wrap"] .main-items {
display: flex;
justify-content: center;
border: 1px solid red;
}
.NavigationBar[data-layout="inline"] .main-items .nav-item[data-index="-1"][data-active="true"] {
opacity: 1;
z-index: 100;
transform: scale(1, 1);
}
.NavigationBar .static-btns {
transition: opacity 0.5s linear;
}
#root:not(:hover) .NavigationBar[data-layout="inline"] .static-btns {
opacity: 0;
z-index: -1;
transform: scale(0, 0);;
}
#root:not(:hover) .TabsPanel {
--tabs-indent: 0px;
}
#root:not(:hover)[data-tabs-tree-lvl-marks="true"] .Tab[data-pin="false"]:not([data-lvl="0"]) .body:after {
display: none;
}
.Tab .close {
margin: 0 5px;
}
.Tab .audio {
position: absolute;
top: unset !important;
bottom: -2px;
right: -2px;
height: 16px !important;
width: 16px !important;
background: var(--badge-bg);
border-radius: 3px;
box-shadow: var(--nav-btn-active-shadow);
}
.Tab .t-box {
--audio-btn-offset: 0;
}
#root:not(:hover) .SearchBar::before {
background: transparent;
}
#root:not(:hover) .SearchBar .placeholder,
#root:not(:hover) .SearchBar .input {
opacity: 0;
}
#root:not(:hover) .SearchBar .clear-btn {
display: none;
}
#root:not(:hover) .PanelPlaceholder {
writing-mode: vertical-rl;
text-orientation: mixed;
}
.BottomBar .tool-btn {
min-width: var(--tabs-pinned-width);
}重啟瀏覽器即可
方法二：
1、安裝Tree Style Tab插件
首先需要安裝Tree Style Tab插件?？梢詫⒛愕臉?biāo)簽頁以側(cè)邊欄的形式呈樹狀垂直展示。安裝方法如下：
打開Firefox瀏覽器，訪問Firefox瀏覽器擴(kuò)展商店。在搜索框中輸入“Tree Style Tab”。找到插件后，點擊“添加到Firefox”，遵循提示完成安裝。溫馨提示：“Vertical Tabs Reloaded”插件也可以，不過“Tree Style Tab”樹狀結(jié)構(gòu)的標(biāo)簽頁看得更清晰
2、配置Tree Style Tab
安裝完畢后，你可以根據(jù)自己的需要配置Tree Style Tab的設(shè)置，如標(biāo)簽的顏色、樣式、行為等。這些設(shè)置可以在插件的選項中調(diào)整，使你的標(biāo)簽管理更加符合個人習(xí)慣。
3、隱藏默認(rèn)的水平標(biāo)簽欄
為了讓瀏覽器界面更加簡潔，你可能想要隱藏頂部的默認(rèn)標(biāo)簽欄。這可以通過修改Firefox的userChrome.css文件來實現(xiàn)：
- 在地址欄輸入
about:config，然后搜索并設(shè)置toolkit.legacyUserProfileCustomizations.stylesheets為true。 - 打開你的Firefox配置文件夾（可以在about:support頁面找到），并在其中創(chuàng)建一個新的文件夾命名為chrome，如果已存在則無需創(chuàng)建。
- 在chrome文件夾中創(chuàng)建一個新文件，命名為
userChrome.css，并輸入以下代碼：
#TabsToolbar {
visibility: collapse !important;
}- 保存并重啟Firefox瀏覽器。
4、享受新的瀏覽體驗
一切設(shè)置完成后，標(biāo)簽頁以垂直方式排列在瀏覽器的一側(cè)。這不僅使得每個標(biāo)簽的標(biāo)題一目了然，還能有效地管理大量的標(biāo)簽頁。
相關(guān)文章
如何將Bing設(shè)為默認(rèn)搜索引擎? 火狐瀏覽器一鍵切換默認(rèn)瀏覽器的教程
相信那些經(jīng)常使用火狐瀏覽器的朋友都清楚，盡管百度是這款軟件中的默認(rèn)搜索引擎，但用戶也有其他的選擇，例如：Google、Bing、有道等等，該怎么設(shè)置呢？詳細(xì)請看下文介紹2025-01-16
警惕根證書過期! 火狐Firefox用戶應(yīng)立即升級瀏覽器 避免影響上網(wǎng)體驗
Mozilla公司近日發(fā)布了緊急公告，提醒Firefox用戶盡快升級至Firefox 128（或ESR 115.13）版本，該公告的原因在于，Mozilla的一項根證書將于2025年3月14日到期，更多請看下2024-10-19網(wǎng)頁被禁止訪問怎么解除? Firefox火狐瀏覽器解除網(wǎng)頁被阻止的方法
火狐瀏覽器有些網(wǎng)頁打不開，需要訪問權(quán)限，這是因為開啟了安全防護(hù)功能，重新設(shè)置一下就可以解決，詳細(xì)請看下文介紹2024-07-17- 我們在使用火狐瀏覽器的時候，經(jīng)常會用到一些比較特殊的功能，比如，詢問保存的位置，不想每次下載都問保存在哪，該怎么設(shè)置呢？吸納關(guān)系請看下文介紹2024-07-17
火狐瀏覽器下載文件沒反應(yīng)怎么辦? Firefox下載文件失敗的解決辦法
火狐瀏覽器下載文件的時候有時候會提示我們下載失敗，那么這要怎么辦？用戶們可以點擊設(shè)置選項下的隱私與安全選項通過設(shè)置解決這個問題2024-05-14- 谷歌瀏覽器在頁面設(shè)計、色彩設(shè)計方面，也是大放異彩的，這歸功于它的【取色器】功能;下面，天極下載小編就給大家介紹下，火狐瀏覽器取色器功能在哪以及使用方法2024-05-08
火狐瀏覽器打開b站不正常很卡怎么辦? Firefox播放B站卡頓解決辦法
火狐瀏覽器刷了一段時間b站后會變得非?？D，滑動評論、看視頻、彈幕都很卡，筆者發(fā)現(xiàn)，只要每隔一段時間清掉cookies和緩存，就能緩解一些，但這種方法治標(biāo)不治本，下面我2024-04-19
火狐瀏覽器新建標(biāo)簽是提示無法載入內(nèi)容時發(fā)生錯誤怎么解決?
最近使用火狐遇到一個問題，使用快捷鍵Ctrl+T 開啟新標(biāo)簽時，就提示無法載入內(nèi)容時發(fā)生錯誤，該怎么解決這個問題呢？詳細(xì)請看下文介紹2024-03-28Firefox怎么添加迅雷插件 火狐瀏覽器關(guān)聯(lián)迅雷下載的教程
我們使用火狐瀏覽器的是會希望下載速度快點，想采用迅雷下載，不過需要自己安裝迅雷插件，詳細(xì)請看下文介紹2024-01-31
火狐瀏覽器如何設(shè)置16倍數(shù)播放 火狐瀏覽器16倍數(shù)播放視頻的教程
很多瀏覽器中可以倍速播放，但是火狐瀏覽器中想要進(jìn)行倍速播放就需要下載一個插件，因為火狐瀏覽器本身是無法進(jìn)行倍速播放的,下載組件后播放視頻時可以在頁面右上角找到倍2024-01-24
