来源于 https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_below_content.css

以下为css代码,firefox 113版本测试成功。

        /*标签页移到底部------------------------------------------------------------*/
         
        /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_below_content.css made available under Mozilla Public License v. 2.0
        See the above repository for updates as well as full license text. */
         
         
        /* IMPORTANT */
        /*
        Get window_control_placeholder_support.css
        Window controls will be all wrong without it.
        Additionally on Linux, you may need to get:
        linux_gtk_window_control_patch.css
        */
         
        .titlebar-buttonbox-container{
          position: fixed;
          display: block;
          top:0;
          right:0;
          height: 40px;
          z-index: 3;
          visibility: visible !important;
        }
         
        [url=home.php?mod=space&uid=880893]@media[/url] (-moz-gtk-csd-reversed-placement),
               (-moz-platform: macos){
          .titlebar-buttonbox-container{ left:0; right: unset !important; }
        }
        @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
          .titlebar-buttonbox-container{ left:0; right: unset !important; }
        }
         
        :root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }
         
        :root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
        .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
         
        /* Re-adjust window cotrols if menubar is permanently enabled  */
        :root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"]{ transform: translateX(0px); }
        :root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-buttonbox-container{ height: 100%; }
        :root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-button{ padding: 2px 17px !important; }
         
        @media  (-moz-platform: windows){
          #titlebar{ -moz-appearance: none !important; }
        }
        /* Move tabs below content */
        #main-window > body::after{
          content: "";
          display: flex;
        }
        #main-window:not([inFullscreen]) > body::after{
          margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
        }
        #main-window[inFullscreen]:not([inDOMFullscreen]) > body::after{
          margin-bottom: 1px;
        }
         
        #TabsToolbar{
          position: fixed;
          display: flex; /*此处原为block,需要修改为flex*/
          bottom: 0;
          width: 100vw;
          height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
          --tabs-navbar-shadow-size: 0px;
        }

    /*自己添加,源代码遮盖了隐私窗口标记,添加此可以解决*/
     .toolbar-items {
       width:calc(100vw - 120px) !important;
      }
  
    #private-browsing-indicator-with-label {
       flex: 0 0 90px !important;
       justify-content: center !important;
      }
    /*自己添加,源代码遮盖了隐私窗口标记,添加此可以解决*/


        #TabsToolbar:hover{ z-index: 1 }
         
        #TabsToolbar{ background-color: var(--lwt-accent-color); }
        #TabsToolbar-customization-target{ width: 100vw; }
         
        .tab-background{ border-top-style: none !important; }
         
        /* Hide stuff that doesn't make sense with tabs below content */
        #TabsToolbar > .titlebar-buttonbox-container,
        #window-controls, /* Fullscreen window controls */
        #TabsToolbar .titlebar-spacer{
          display: none !important;
        }
        #navigator-toolbox[inFullscreen]:hover #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }
         
        /*强制缩进地址栏行尾端margin;*/
        #nav-bar{
                margin-right:90px !important;
        }

对于mac系统,该代码要稍作修改,第一nav-bar左侧出现重叠,因为mac按钮在左侧。第二mac的按钮貌似下移,所以适当要调整。

mac版本的代码如下:

/*标签页移到底部------------------------------------------------------------*/
         
       
        .titlebar-buttonbox-container{
          position: fixed;
          display: block;
          top:0;
          right:0;
          height: 40px;
          z-index: 3;
          visibility: visible !important;
        }
         
        @media (-moz-gtk-csd-reversed-placement),
               (-moz-platform: macos){
          .titlebar-buttonbox-container{ left:0; right: unset !important; }
        }
        @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
          .titlebar-buttonbox-container{ left:0; right: unset !important; }
        }
         
        :root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }
         
        :root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
        .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
         
        /* Re-adjust window cotrols if menubar is permanently enabled  */
        :root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"]{ transform: translateX(0px); }
        :root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-buttonbox-container{ height: 100%; }
        :root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-button{ padding: 2px 17px !important; }
         
        @media  (-moz-platform: windows){
          #titlebar{ -moz-appearance: none !important; }
        }

        /* Move tabs below content */
        #main-window > body::after{
          content: "";
          display: flex;
        }
        #main-window:not([inFullscreen]) > body::after{
          margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
        }
        #main-window[inFullscreen]:not([inDOMFullscreen]) > body::after{
          margin-bottom: 1px;
        }
         
        #TabsToolbar{
          position: fixed;
          display: flex;
          bottom: 0;
          width: 100vw;
          height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
          --tabs-navbar-shadow-size: 0px;
        }

.toolbar-items {
  width:calc(100vw - 120px) !important;
  }
  
#private-browsing-indicator-with-label {
  flex: 0 0 90px !important;
  justify-content: center !important;
  }

        #TabsToolbar:hover{ z-index: 1 }
         
        #TabsToolbar{ background-color: var(--lwt-accent-color); }
        #TabsToolbar-customization-target{ width: 100vw; }
         
        .tab-background{ border-top-style: none !important; }
         
        /* Hide stuff that doesn't make sense with tabs below content */
        #TabsToolbar > .titlebar-buttonbox-container,
        #window-controls, /* Fullscreen window controls */
        #TabsToolbar .titlebar-spacer{
          display: none !important;
        }
        #navigator-toolbox[inFullscreen]:hover #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }
         
        /*mac版本设置左侧margin,以及三按钮强制上移;*/
#nav-bar{
      margin-left:90px !important;
        }
    .titlebar-buttonbox-container,.titlebar-buttonbox{
           margin-top:-5px !important;
           }