由于你的浏览器上的标签太多而对阅读和查找带来不便。很多人想让自己的浏览器拥有在侧面显示标签的功能，本文将对此进行解答，并进行一些美化。
8 ]3 z1 w7 u6 W% l5 ~( r
- Z% J9 D/ O- _% E: w1 f5 B' D4 i% R$ O0 ~
* b6 N; O5 d0 N6 P# X6 {
. l( h& B1 I4 h4 D
" q6 @; v- V' }: Q4 q0 X1 U
) ?+ r" G- ?4 Y, `- V0 b3 U; o) _" r/ i8 s
9 C; B7 L$ }/ Y/ Z$ {/ U0 M! i# ]
3 h8 A0 Q( Q- U- g% p : c* P9 d- S/ y$ t I- m
, z, }& q: H0 k$ O% w
* X1 `% H! k0 {, S
+ _* A N# r: J" n; }
: l, q$ G! k. h; U0 y) {5 t/ c. h1 L# K. E4 |( E* j
. P5 Z1 ~; `9 S) z3 K" E \
5 t/ i+ v W+ d& c5 h6 D 添加了侧边栏的Firefox浏览器 （点击看大图）
+ v8 L: X3 S2 q8 I% j/ j* P- s; }+ p+ p7 g, W$ G$ i$ d
/ F- b2 S8 a, ^! v! t& e
* N2 U I$ f @3 \$ I: {# k) k
: E/ K" |( p2 i0 C' ^" f/ m
P* F8 V+ E) s/ w4 ?) ~+ A& D# V, A6 D- w H
) E- |. y" q7 ?8 Y6 @4 Y
6 E2 V9 C7 H+ D& ]
/ U4 \( e, a; [# |
要在Firefox 2.0中实现上图效果，你需要做如下两步：
/ p" J7 O! z+ }7 \, y$ y/ v; ?
8 w. I6 [/ t( r7 {( @6 ?2 e. w 1. 安装Tab Mix Plus并设置；
# n) }( e6 M: v& {' x$ `3 N! z
) A+ u4 s& \9 w! @* Q i% T 2. 创建修改 userChrome.css文件。
$ u, R4 [2 N# f) l ?$ _
% L1 F' F; A) L. U% A 下面进行详细讲解。
! m% _& k. _( Q ^1 K2 C/ z
8 B, u4 j5 V% X# x2 |* z 一、Tab Mix Plus扩展
+ s6 Q2 L3 a% u3 Q. h Q; m% a( A6 U" ?
首先需要安装Tab Mix Plus扩展。
! k& f- s& _" q4 q/ L" o1 B* ?' U! M* w- e3 r6 I& c/ C' T! K3 I
在工具Tab Mix Plus选项中，对其设置:
3 ]: r3 H; d: z. l3 p8 o, L8 h. U- p& H; g+ G
% r2 X& s7 a+ {" r# A" \ M4 X$ W! C8 K k
. v+ v6 z. T8 T# f8 u4 G
+ ]5 d/ u7 l: Y) ^2 O$ `
1 w$ L% K X) L& e4 A- p
% F: J/ e- n- p
1 ]* Z' F) j; R. }+ a) a$ z2 N
/ m* Y/ F5 D$ w* @" i # C5 d( X& X; u# |
" d! Z- \1 J% [, Z( O( Y1 H' T. Y' T: a
) Y8 U0 \3 @' `) a" J
. M" c2 Z6 V6 n
; O1 b8 G. {4 u
9 `9 V( n: W' J
' ~: S S* M# ^6 z 外观设置
/ E- m) B$ H: @5 d2 c
$ f" i0 _" E4 @! J4 v* a' _4 g+ s
! U _ }9 Q8 a5 Y6 {
; e! i9 @% P+ U# J) e
, C& _0 y' y) G; z1 B9 R% O" Y8 \$ O! \1 M u
7 `, L) P1 h. W' ]6 X" D3 M: e( A
# K3 z$ n5 x+ ~# W4 A }
! m% ]' y+ v3 t2 K0 |& L# t3 F
/ x$ P' v; e0 r6 s8 S4 d G% r
外观标签栏外观标签栏位置设置为底部。
5 O% y7 j( R/ Q0 t" B H
; |1 ~ @; z4 O G
外观标签栏外观选中内建的样式。
$ T$ p: U% ?7 }# W1 t
# T1 U# @+ i3 R, N 外观标签栏外观中，当所有标签占用宽度超过标签栏时启动，选择自动滚动。
: B- Q+ e6 z$ ], i; Y& m+ v- }. L) A" G/ q. D5 M8 K) A3 Z
: z1 [9 E$ i9 {- n; y% Z2 K7 w
( o% k h+ ~% n$ E2 R7 j6 N' I( @# M1 T
9 Y9 k9 Y; a; w7 w F / ?$ z% ]7 V4 v$ N& ]7 {' n
: P; l1 r+ [& ]
" r( f# a, h {/ l, p( I N2 ~
. ~- H" S0 v, K' W: z 8 K; B: q+ K6 P {& o
5 j" Z2 X5 _+ p( N( L- Q3 W
0 B; Z2 r R4 K; ?' u$ S1 W7 g: U) R# V5 c- A
, _8 ]2 Z' {( u1 [' S7 F f
% Q: d( [3 e$ R: W
$ D1 N6 b5 b3 i" b. U6 d1 B
9 P. _9 }; J' Y& F% x
: p, K' `! l4 l; O! \; j" g l( f& _3 ?1 _" Q+ Z+ Y
8 k X2 g# y {$ y
+ Y# J4 t0 D4 y$ G% G4 e% @8 C 外观标签页外观中，关闭标签页长度符合其内容。
9 b$ r) ~9 @+ \8 Z
2 X- E9 c$ p6 A" e4 v 二、创建修改userChrome.css
' s9 a& a4 u9 L0 r2 Z
. A9 B, W" d$ `8 z userChrome.css的路径：
" V2 N! K% \$ r2 q! H4 X) j2 I
) n) O' A" M9 X$ L在Windows Vista/XP/2000中，路径通常为%AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\, xxxxxxxx 是8个字符的任意组合。Windows XP/2000中只需浏览
4 n+ p( p a! N5 I% i: I* `6 g: {
- J2 \& t4 T& h& r- i# k+ UC:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\ ，在Windows Vista中浏览 C:\users\[User Name]
6 `: P% f1 ]: V& v; i' k2 d- p+ y. U/ T, |: [+ E; y; P
\AppData\Roaming\Mozilla\Firefox\Profiles\。
$ o$ E8 i. V2 _( k* ~% H- b
) ^+ ?1 x5 A0 M在Windows 95/98/Me中，路径通常为 C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\
! n& Z5 S6 f0 l4 L1 P) Q5 T9 e
9 U. j8 M! g( T在Linux中，路径通常为 "/.mozilla/firefox/xxxxxxxx.default/
t& O& _3 L0 z6 {0 }
& {% X6 C' X: Q! D/ r
在Mac OS X中，路径通常为 "/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/
1 q* T2 Q8 @6 x4 j
6 n) k0 X) U* J( A# k8 w! T
userChrome.css在默认情况下在不存在的，默认路径下有 userChrome-example.css ，你可以简单将其重命名为userChrome.css。
9 I9 n+ c' v5 x6 N& b- B: L" g0 m3 n5 i/ K" ~
然后编辑该文件，复制如下内容，完全替代原内容：
% S- j% |# \8 g1 z8 `0 J7 }7 t# ~ c0 E. H2 q) }
* O8 _: _ o* _! f3 J% V
6 |, X6 O, H& N4 J* f' q9 b9 ?7 j, [0 w3 a3 \
1 m3 l" ~& _8 P; l4 @+ k - L+ B }* ^9 G" G
1 w: l% y; N+ X% N+ H+ M) r+ h
/ u, l7 K# b$ k. p J& x8 L
) p& r6 x5 s& z' ~) y" n
) q' t# r, C u) Y" S9 q
) Z" a7 p) {2 g& p" P8 P* Z /* beginning of file userChrome.css */
3 e$ S, c" p, c' Z
8 E$ D) c- V' ^ /*
* |4 P% V" j/ {4 p8 l# T1 M) g, H
& ?5 Q% \$ C8 V/ L) ` * Do not remove the @namespace line -- it's required for correct functioning
) H% `- m1 w: y/ R6 k. s( l8 v! q4 G, m, `2 D& ^# Q
*/
* d6 W# C! l8 Z2 T0 q. {/ ~; E' }4 @+ e' i. p9 f
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* set default namespace to XUL */
# y4 H5 @; V Y1 b( G
0 [& c' S/ f) ~2 l1 u, | : c% _ u' ]3 [( X' U. C; C: o
3 d0 h" X0 h5 N5 `/ M /* works in in FF2.0 */
( V: L/ X7 |" i8 ?( }+ s9 B. [
, F* b$ o% K+ s: [, o3 c
#content tabbox {
, k; o. z) O C. B
# c4 |" d4 g9 S* v, a! ^/ h -moz-box-orient: horizontal;
; I$ M" k1 ^; E# c& [
; ~5 d: N6 Y( v8 U( Q% t9 E }
) N+ L. A7 B, O0 r% X$ x0 V! u
) M f* K& h" E4 F' R
.tabbrowser-strip {
* M9 ^/ c) X' t, s
9 ?4 z5 ~& h% T4 a1 G& H- j7 Y. |
-moz-box-orient: vertical;
" ~& p% D! K6 y; J* O5 {; f) [. _5 M& Y! {% ?2 w& q0 {4 _" f
/* note: you can set this to -moz-scrollbars-vertical instead,
* S8 p) M% r6 s$ d& c1 y
2 F2 a. V4 d+ Q5 E, z: I, @
but then the scrollbar will *always* be visible. this way
6 O+ _# }% u& h2 d% k
( v- Y9 E% S2 m. s3 q5 t there is never a scrollbar, so it behaves like the tab bar
. Z# j* O c p! X
, P- Z: e3 a4 J" b+ c
normally does */
" i7 B9 h) l- [* f
2 Z! x9 Y5 M/ S" R9 X
overflow: -moz-scrollbars-none;
$ Q3 z9 a% f7 l: c9 L6 g: u; \$ X- G1 b- T5 ?
}
. l& T- i! y4 j2 r1 ~
" L% N S' `* G$ S' I r .tabbrowser-tabs {
8 E- n. R! s5 I
8 v t( ~# D* d: T% X4 p
-moz-box-orient: horizontal;
1 O: _5 B3 t+ @4 Z3 C( L0 W; s, J. H( e1 G
/* min-width: 50ex; */ /* 1680 pixels screens */
, W' N0 L. N. O+ Q" K K& R8 P3 d; v6 h) M% f- ]) C
/* min-width: 40ex; /* =1680,1600 pixels screens */
$ ?7 d5 o. g. W" D
& W; u0 m" S- {) P( O9 Q
/* min-width: 35ex; */ /* =1440 pixels screens */
$ v8 a+ ], @% H& X
0 b2 D" j5 z. |2 ^
min-width: 30ex; /* 1440 pixels screens */
8 j5 y. j9 |1 `: ]/ c: }' [' Q- A2 W3 I- y7 z
/* min-width: 20ex; */ /* 1280 pixels screens */
0 ?( E9 m; @" \2 ~7 i* M! H1 X/ Q H) d1 c! l0 C* w7 [1 d
/* min-width: 17ex; */ /* this is almost the minimum to go down to on small screens */
m( s' o+ l+ y+ O. o) _( s
]: |3 Y; }- M' K6 x8 N -moz-box-align: start;
8 a! S( |5 `. X) |, i
0 q7 w" @, Z8 k" @% ?7 V5 Z6 x }
$ q. H x: _; n8 K" n! W; k5 ?
2 t6 G, l O5 @; m+ V5 B5 Y9 p6 j
& d A6 z4 p( I- s
- m- l$ v. ^; S% N" X$ L; \, U" |" l /* stack vbox hbox*/
3 u: M3 x, h' _" J/ }: J0 j
0 Q7 K* B9 [0 F4 o .tabbrowser-tabs stack vbox hbox hbox {
3 Z# S* U; L. V$ {( G4 a
e' g ]1 m9 z& A -moz-box-orient: vertical;
( f/ |! C$ |; n1 i G
5 q2 K+ b; H5 [1 c* h* m# h% l* C -moz-box-align: stretch;
) M$ w0 q, @: \4 x- U% B2 i+ u d7 F4 z. {* d3 A' {
}
, [" \4 E& V4 |$ h4 g0 f
& L; n) a9 N: C9 a( W
.tabbrowser-tabs stack vbox hbox hbox tab {
6 q8 H+ `/ c3 a* y! q' h) _5 q7 s& J7 c: e! e M( U3 r
-moz-box-align: start;
6 L& w9 M6 M/ \$ R, s1 H3 i/ [
) }: C) ~, U5 y* v# | -moz-box-orient: horizontal;
( J- N: P$ @5 g9 j! r1 B, \% l# I( c9 `
3 e/ _% }$ ?, r6 t }
) X7 N, V$ O( _, z, Y/ b& j
+ M/ T) T" z/ S1 }5 m /* to put the tabs on the right un-comment this line (not needed if using Tab Mix Plus)
1 b9 g+ ^, O+ P* e6 N8 m
5 H3 R/ L$ ?5 j: N #content tabbox {-moz-box-direction: reverse;} */
7 B j! s0 N0 B$ \0 Z. C
; c, D4 m* G3 [7 s& p7 D3 a /***** Tabbar *****/
4 ]% U. |7 E! z" h% h1 ~
! F1 F" d& v' h! H3 r, t% r
/* Background for tabbrowser strip */
\$ ?6 x, B( H$ x" J4 r- I! l# L9 b2 Z( x+ O
tabs.tabbrowser-tabs {
. u5 `# r- b+ ?/ p' t5 r# ~% y$ d% g
background-color: none !important;
3 J, z( `7 y# n7 y. y6 V+ I
: w# b$ i% \. w
background: url(bkgrd\\topbar.jpg) !important;
* b6 x8 J6 h) F+ {! ] V Z0 y# I8 [8 c+ S
}
- k9 ~6 Q, V( t: v# z- Q* z- L5 |" a) D2 Y
/* stop refcontrol context menu item */
/ k* n! p- l9 ?! }0 z) o5 Q* K$ l( ?9 r- u: m+ ?; t9 K9 Z
#refcontrol_options, #refcontrol_options_link, #refcontrol_options_image, #refcontrol_sep
* }" U: X, Q; A5 _/ n1 k
: M5 H7 _3 Y; R# _ V4 j7 i
{ display: none !important; }
- |0 j( X1 `. ?- E; ^" Z$ u
p" F% E9 @) l9 a* ?& k
/* remove the search button (magnifying glass) */
) d- b8 ~( @' U7 k3 M1 g
! S$ E$ V2 T* ?
.search-go-button-stack { display: none !important; }
" h# R% j/ q( _5 t, s# T
& A& h4 Y# L1 U& [
/* remove the search engine drop-down button as this line */
% x5 m8 Q8 m3 }, J2 B/ \" N; G7 R' x6 Q! C
/* .searchbar-engine-button { display: none !important } */
D7 Y: }, N% u/ S0 I
, H3 w3 o& W+ ^+ B! a1 I7 y /* end of file userChrome.css */
3 v$ a# {: Z/ j
8 m3 v3 [( f& I$ m8 p) `
$ Z0 \# w2 a6 R, x) G0 q0 H% @- c T
* A4 s# L" k% Z: J6 T8 t: U + T7 K# s M) W3 p3 r
% Y4 ?; h$ O3 x# ]; [ O0 n- R ) r' k0 ]$ o* F) S
) l) k* J) h7 Y) u. Z4 _
( ]7 R8 _6 d; T" N, W1 X% o
+ }- B; C3 F5 F- h S, s/ N$ q8 t9 c! h / z& r% I* W! {" U
$ D9 h# i" t6 B V" p4 h, Q 但是min-width: 30ex; /* 1440 pixels screens */这行要根据实际分辨率，参考注释内容，进行修改。
3 G; D" S% x$ i3 I7 |2 h9 _' y, W" L3 u6 h7 W* F+ ]8 H; H; G
现在你就可以在两侧显示你的标签栏，可以允许建立40和或者更多的标签，充分利用宽屏的空间！
