敏銳的觀(guān)察者也許會(huì)在上一例注意到白色的標(biāo)簽角落。這些不透明的角用來(lái)防止下面的圖像透過(guò)上面的一副。理論上，我們可以嘗試使用部分背景圖像來(lái)適應(yīng)標(biāo)簽的背景。但是我們的標(biāo)簽會(huì)在高度上增長(zhǎng)，嘗試通過(guò)移動(dòng)背景顏色，背景圖像就會(huì)相對(duì)變矮。代替的辦法是，改變圖像，將標(biāo)簽的角落設(shè)為透明。如果弧線(xiàn)是反鋸齒的，我們?cè)谄溥吘壥褂幂^平均的背景色彩。

現(xiàn)在，角落已經(jīng)變成透明色，左邊的圖像將透過(guò)右邊圖像的角落。為了補(bǔ)償，我們?yōu)楸韱雾?xiàng)加入和左邊圖像寬度相吻合的padding（9px）。既然已經(jīng)為表單項(xiàng)加入了padding，我們還需去掉同樣的寬度以達(dá)到文本的居中（15px-9px=6px）：

#header li { float:left; background:url(“right.gif”) no-repeat right top; margin:0; padding:0 0 0 9px; }#header a { display:block; background:url(“left.gif”) no-repeat left top; padding:5px 15px 4px 6px; }

仍未結(jié)束，因?yàn)榧尤肓?個(gè)像素的padding使左邊圖像與標(biāo)簽的左邊之間產(chǎn)生了一段空白。現(xiàn)在，左側(cè)與右側(cè)，可見(jiàn)“doorway”的邊緣接在一起，我們?cè)俨恍枰獙⒆筮厛D像保持在上方。于是，交換兩幅背景圖像的順序，相反過(guò)來(lái)。同樣交換“當(dāng)前”標(biāo)簽中使用的兩幅圖像：

#header li { float:left; background:url(“left.gif“) no-repeat left top; margin:0; padding:0 0 0 9px; }#header a, #header strong, #header span { display:block; background:url(“right.gif“) no-repeat right top; padding:5px 15px 4px 6px; }#header #current { background-image:url(“left_on.gif“); }#header #current a { background-image:url(“right_on.gif“); padding-bottom:5px; }

完成這些后，我們到達(dá)了效果4。要注意的是，透明的角落在標(biāo)簽的左側(cè)產(chǎn)生了一段不能點(diǎn)擊的無(wú)效區(qū)域。這個(gè)區(qū)域在文本以外，但仍然是可以察覺(jué)到的。在標(biāo)簽的兩邊都使用透明的圖像是沒(méi)有必要的。如果我們不希望產(chǎn)生這種無(wú)效的區(qū)域，那么我們必須使用在標(biāo)簽后面使用顏色，然后用這種顏色來(lái)代替標(biāo)簽角落的透明圖像?，F(xiàn)在我們僅保持這種透明角落。

對(duì)于剩下的問(wèn)題，我們將一次性完成全部的修改：加重標(biāo)簽文本，將普通標(biāo)簽中的文本改為棕色，“當(dāng)前”標(biāo)簽文本改為深灰色，去掉鏈接的下劃線(xiàn)，最后將懸停文本色彩改為同樣的深灰色。經(jīng)過(guò)一系列的改變，我們將看到目前為止的效果5。

一致性的解決

在效果2之后，我們公認(rèn)的一個(gè)問(wèn)題就是在IE5/Mac瀏覽方式下，每個(gè)標(biāo)簽延伸并占據(jù)了整個(gè)瀏覽器的寬度，以致標(biāo)簽垂直的堆在了一起。這不是我們所希望的。

在大多數(shù)的瀏覽器中，浮動(dòng)一個(gè)元素會(huì)有收縮，收縮最小至它所包含內(nèi)容的大小。如果一個(gè)浮動(dòng)元素包含一幅圖像或其本身即圖像，便會(huì)收縮至圖像的寬度。如果僅僅包含文本，那么將會(huì)收縮至最長(zhǎng)的，不可被頂開(kāi)的那文本的寬度。

一個(gè)問(wèn)題出現(xiàn)在IE5/Mac中的圖片中，當(dāng)一個(gè)auto-width的塊對(duì)象元素被插入到一個(gè)浮動(dòng)的元素中時(shí)。其他的瀏覽器仍舊將浮動(dòng)縮小至最小，而無(wú)視容器內(nèi)的塊對(duì)象元素。但I(xiàn)E5/Mac并不按照這種情況，相反它將浮動(dòng)和塊對(duì)象元素?cái)U(kuò)展至盡可能的寬度。為解決這個(gè)問(wèn)題，我們將錨鏈同時(shí)浮動(dòng)起來(lái)，但僅僅對(duì)于IE5/Mac，以免放棄其他的瀏覽器。首先，我們?yōu)殄^鏈設(shè)定浮動(dòng)規(guī)則。然后，我們使用反斜杠注釋法來(lái)隱藏這種規(guī)則，讓它僅僅對(duì)IE5/Mac生效，而無(wú)視其他的瀏覽器：

#header a { float:left; display:block; background:url(“right.gif”) no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; }/* Commented Backslash Hack hides rule from IE5-Mac \*/#header a {float:none;}/* End IE5-Mac hack */

現(xiàn)在IE5/Mac瀏覽器將按我們所期望的那樣來(lái)顯示標(biāo)簽，看效果6。對(duì)于非IE5/Mac的瀏覽器什么都不需要改變。注意到IE5.0/Mac的一系列解釋上的bug在IE5.1中解決。因此，滑動(dòng)門(mén)技術(shù)在5.0版本中所遭遇的問(wèn)題超出了hack的限度。既然升級(jí)到IE5.1/Mac已不成難題，OS 9 Macs/IE5.0的占有率應(yīng)逐漸縮減至很低。

舉一反三

我們剛剛演練了滑動(dòng)門(mén)技術(shù)，用純文本和無(wú)序列表來(lái)創(chuàng)造導(dǎo)航標(biāo)簽，加以少量的樣式。它的裝載速度快，具有可維持性，并且文本的大小可以在不破壞外觀(guān)的情況下進(jìn)行較大的伸縮。不必我們?cè)僦厣暝趧?chuàng)造復(fù)雜樣式的導(dǎo)航欄中，滑動(dòng)門(mén)技術(shù)所表現(xiàn)出來(lái)的彈性了。

只有想不到，沒(méi)有做不到。最終效果向我們展示了一例，但我們?cè)O(shè)計(jì)不可能因此而被限定死。

在某些場(chǎng)合，標(biāo)簽不一定是對(duì)稱(chēng)的。我很快就制作了這種標(biāo)簽的第二個(gè)版本，也有陰影3D的樣式，有角的邊緣，和具有特色的左邊部分。依據(jù)第二個(gè)版本，我們甚至可以交換左右兩幅圖像的位置。以這種細(xì)致的布局和靈巧的圖像控制，我們可以去掉按鈕的下邊框以便標(biāo)簽圖像更好的去適應(yīng)背景，如第三個(gè)版本所顯示的那樣。如果你的瀏覽器支持多個(gè)樣式表的切換，你甚至可以靠它在多個(gè)版本的導(dǎo)航欄之間自由切換。

仍有許多我們沒(méi)有提到的其他的效果。快速的提一下，我改變鼠標(biāo)懸停的文本色彩，但是真?zhèn)€圖像可以替換掉以創(chuàng)造出更有趣的變換效果。即使標(biāo)記中兩個(gè)嵌套的HTML元素，也可以用CSS來(lái)達(dá)到一些我們還未想到的效果。我們?cè)诖死袆?chuàng)造的僅僅是水平的標(biāo)簽欄，但滑動(dòng)門(mén)亦可應(yīng)用于許多其他的情形。閣下覺(jué)得如何呢？