在CSS中的“滑动门”技术（第一部分）中，我们介绍了一种技术，通过它，仅用简单的，基于文字的语义标记就可以创建出视觉效果极好的界面元素。在第二部分中，我们将把这项技术向前推进一步。如果你还没有读过第一部分，那么首先应该去阅读它。

现在，我们来看一种新的设定：所有的标签都是非高亮的，仅用一幅图片实现滑动门的滚动，为IE/Win提供可点击区域问题的解决办法，并且建议使用一种不同的方式来定位标签。为了回到第一部分中刚好停止的地方，这次我们将会略过这一技术的某些相同的基本的部分（见第一部分）。

无“当前”标签

在第一部分中，我们并没有考虑到那些无高亮的“当前”标签的情况。比如，注册过程，或者包含法律声明的页面，可能并不属于标签所代表的任何一个版块。在这种没有“当前”标签的情况下，就无法使用为其加上1像素额外的下补丁的办法了。因此，标签的下边缘会由于这一办法的失效而变得不可见。

但这一问题解决起来也很容易：为所有的“非当前”标签加上1像素的下边框，对于万一出现“当前”标签的情况，我们就将其下边框去掉：

#header li {
    float:left;
    background:url("left.gif")
    no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    border-bottom:1px solid #765;
    }
#header #current {
    background-image:url("left_on.gif");
    border-width:0;
    }

在示例7中可以看到去掉了当前标签后发生的变化。

单一图片实现滚动

为了简便起见，在第一部分中，我们有意地忽略了滚动这一主题。既然现在我们已经掌握了一些基本技术，就可以将它们组合以扩展用途。

直到现在，实现滚动效果的方法—无论用JavaScript或者CSS—都是通过创建两套图片来达到，一套用于正常状态，另一套用于悬浮(hover)状态。为了避免由于两套图片不是同时下载而引起的延时，人们想出了许多办法来将这些我们需要的图片“预载”到浏览器缓存中。Petr Stanicek(aka “Pixy”)在“快速滚动，无需预载”一文中，向我们展示了如何用将两幅图片合并为一幅图片的办法来避免预载。

在本例中，我们将左侧的两幅图片堆叠在一起，一幅置于另一幅的上方，合并成一幅新图片。对于右侧的图片也采用同样的方法。曾经是150像素高的图片，现在已经是300像素高了。我们最终得到了 left_both.gif 和 right_both.gif 这两幅图片。有了这些新图片，我们就可以利用CSS的优势，通过设置背景位置这一属性来实现：当鼠标移动到标签上方时，图片恰好显示出我们想要的部分：

我们将列表项和锚点的背景替换为新的图片，并保持同样的位置：

#header li {
    float:left;
    background:url("left_both.gif")
      no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    border-bottom:1px solid #765;
    }
#header a {
    float:left;
    display:block;
    background:url("right_both.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
    }

在处理 背景位置 这一属性的时候，必须指定两个值，水平位置和竖直位置，并且严格按照此顺序指定。不能像以往一样将关键词（left, right, top等）与长度或百分比组合。因此，在指定悬浮位置的时候，避免使用关键词。我们用0%来指定左侧图片到左边缘的距离，用100%来指定右侧图片到左边缘的距离。

因为我们明确地知道在新图片中每一部分的高度及起始位置，所以我们就可以精确地以像素值来定义背景图片的竖直位置。图片的上150像素是正常状态时的图片，下150像素是悬浮状态时的图片。因此，对于左右两幅图片来说，我们只是将其背景的位置设为-150来将其推上去。同样在前面的基础上作修改，因此，我们仅需要设定文字颜色即可：

#header li:hover, #header li:hover a {
    background-position:0% -150px;
    color:#333;
    }
#header li:hover a {
    background-position:100% -150px;
    }

对于当前标签，同样可以用类似的合并后的图片。我们同样通过位移背景图片的办法来代替从前的指定新图片的办法：

#header #current {
      background-position:0% -150px;
      border-width:0;
      }
#header #current a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#333;
      }

实现滚动就是这样简单。在示例8中看看它是如何工作的。我们将图片数量由5幅（左2，右2，背景）精简到三幅（左，右，背景），并且消除了预载。

到目前为止，如果在Internet Explorer (IE for Win or Mac)中验证，你一定会注意到，以上实现的滚动效果并未起到任何作用。这是因为IE仅将 :hover伪类（pseudo class） 应用于锚点元素，其他的一概不管。为了更换滑动门技术中的图片，我们需要在锚点内加入一个额外的元素（如span），并将所有的样式都向内移动一个元素（将应用于列表项的规则转移到锚点上，将锚点的规则转移到span上）。

在这里，我们就不详细地回顾为在IE中为实现滚动效果而应作的调整了，但是为了证明这的确是可行的，大家可以在示例8a中看到预期效果。正如你所看到的，元素角色的转移同时也为我们消除了在第一部分中提到的那一小片不可点击的空白区域，这是因为此时锚点容纳了整个标签。

滚动通常（或多或少地）是装饰效果。有些人可能觉得，为了使IE能够正确显示滚动效果而添加那些额外的标记并不怎么值得。另一些人则会认为，对于能使主流的浏览器正确显示并消除无法点击的空白区域来说，一个额外的span标签只是很小的牺牲。加不加入这个额外的标签最终都取决于你。

修复可点击区域

正如在第一部分里所举的例子中，我们能够通过将导航链接转换为块级元素和在它周围加上补丁的办法来扩大链接的可点击区域。可视化区域通常是用背景色（或者背景图片）来填充，这就意味着用户可以点击这一区域中的任何部分，而不仅仅是链接的内容。在大多数浏览器中，当一个锚点被转换为块级元素（通过CSS）并加上额外的补丁时，它的可点击区域就同时扩展到能够完全覆盖链接的内容和补丁的大小。不幸的是，IE/Win只扩展看得见的区域，其可点击的区域局限于锚点的内容，而将补丁排除在外：

在第一部分中（以及上方的示例8a之后），我们简要地提及了标签左侧的一小块不可点击区域，这是由于为了保证背景图片的透明效果而引起的。同时也介绍了消除这一小块不可点击区域的办法。然而，第一部分却回避了在IE/Win中的可点击区域的问题。IE（6.0或更低）在对CSS的渲染上存在着一些bug。其中的一个导致了IE在处理CSS样式化的导航栏时,产生非故意性（有时是未被发现的）错误，从而影响导航的可用性和可达性（accessibility）。

在IE中，对锚点指定宽度或者高度可以奇妙地迫使它也将可点击区域扩展。但是这样做的话，在其他浏览器中就会限制标签的可变大小。对我们的例子来说，你可能会想到，用单位”em”来指定标签的宽、高。这样做对于已经确定的字体大小和数目来说是可行的。但是，为锚点指定高度会令IE/Win显示错乱。而且，除非我们在标签中等宽的字体，否则，为标签指定宽度会使得它内部的文字在缩放时变得极不协调。（更别提要对每个标签的文字测量宽度，并在每次改变文字时对其进行重新指定所带来的烦恼了。）

幸运的是，我们已经找到了IE/Win在执行CSS时的一个与众不同的破绽，迫使其对可点击区域进行扩展，而不必武断地去猜想一个宽度。我们只需要为锚点指定一个很小的宽度。大多数浏览器会关注 － 并遵循 － 块级元素的宽度属性，即使当它的内容与其宽度并不相符。该元素会收缩至指定的宽度，即使其容纳的文字已经挤出了元素的边缘。但是IE/Win只会收缩到该元素的非换行文字的最长宽度。

所以，即使我们为锚点指定一个微小的宽度（如 .1em），IE/Win仍然允许锚点与其内容文字同宽。与此同时，IE也会将可点击区域扩展到整个标签：

#header a {
    float:left;
    display:block;
    width:.1em;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
  }

这无论怎样都是毫无无意义的，因为两种概念从根本上是互相对立的。然而它却很管用，并且在IE/Win中修复了可点击的区域。但是我们必须牢记，其他浏览器遵循这一指定的宽度，并且的确会将每个标签试着收缩到 .1em＋补丁的宽度。恰好，IE/Win（6。0或更低）无法理解CSS子选项 － 因此，我们可以利用它在其他浏览器中将锚点的宽度重新定义为“自动”，从而允许标签正常地缩放：

#header > ul a {width:auto;}

示例9修复了IE/Win中的可点击区域，同时它那一小段令人悲哀的，以IE为中心的修复代码，对于其他浏览器应该是不可见的。

定位标签

第一部分的每个示例中，我们都将标志符（ID）应用于一个列表项以改变“当前”标签的外观。将标志符由某一列表项移至另一列表项而产生的结果，对于刚刚接触CSS的人来说是很容易理解的。但是另一种定位当前标签的办法在多数情况下可能更有效，虽然这需要多加入一些标记。

为了替代用单一的标志符id=”current”来标识当前标签，我们给每个列表项都加上了唯一的标志符，如下：

    

      
Home
      
      
News
      
      
Products
      
      
About
      
      
Contact
    
  

我们同时也为更大的容器元素（如body）加上标志符。这个标志符于它所在的版块一致。body标志符可以用来为每个版块添加其特有的效果。如果两处（译者注：body和标签）都有标志符，并且符合下层选项所需的条件的话，就可以为某个指定的标签加上其特有的效果。我们将用body与列表项标志符相组合的办法，而不是将#current作为选项的一部分，来对被定为“当前”的标签进行设置：

#home #nav-home, #news #nav-news,
    #products #nav-products, 
    #about #nav-about,
    #contact #nav-contact {
      background-position:0% -150px;
      border-width:0;
      }
    #home #nav-home a, 
    #news #nav-news a,
    #products #nav-products a, 
    #about #nav-about a,
    #contact #nav-contact a {
      background-position:100% -150px;
      color:#333;
      padding-bottom:5px;
      }

示例10显示了在body上应用标志符id=”news”后的效果，而示例10a显示了在body上应用id=”product”后的效果。{A List Apart的导航栏同样也是通过body标志符来设置的 －Ed}。

补充说明

置顶的方块（box）：在你的页面上可能会有一些可扩展的模块，它们在其头部(header)以及所支持的内容周围绘制出一个方块。假设你用的是包装类的容器（如div），它同时容纳了这个模块的头部以及内容，并且你也已经有了两个分别对应其背景的元素（div, header）。在这种情况下，你很可能希望将窄的那幅图片放在右侧，就像示例2中显示的那样。这样做会使你能够完全控制标题文字的左侧起始位置。将每一幅图片的下端与背景色相融合，这样就使它们看起来像一个整体。

转向：如果你可以大概的估算出界面元素的高度，（或者创建一幅足够大的图片以适应竖直方向的扩展）那么你就可以用上下两幅图片（代替左右两幅）将“门”转向。记得要将文字换行所需的额外空间计算在内，当扩大字体时或浏览器的宽度比较窄的时候就会发生这种情况。

IE中出现的闪烁：在IE/Win中，当鼠标悬浮在标签上方时，如果你看到图片闪烁，那么请检查一下临时文件的缓存设置（工具 > Internet选项 > 常规 > 设置）。可能你将默认设置调整为每次页面刷新都检查新的版本。IE/Win当临时文件选项被设置为“每次访问页面”都检查新的版本的话，那么它就无法稳定地显示锚点的背景图片。默认设置是“自动”，这样就允许浏览器直接从缓存中调用图片，从而避免了闪烁。大多数用户从来都不会更改这一设置，更可能的是，他们根本都不知道这一设置的存在。

多文字标签：可能会遇到这种情况，当需要在一个标签里显示多个单词（英文）的话，你很可能需要对锚点加上一句声明{white-space:nowrap;}，以防止标签文字在某些浏览器中发生换行。

对这一技术来说，可能还存在着一些已知的问题、改变或者变化，也许某天还会有一些新的突然出现。但是这篇文章就到此为止了。幸好，对与围绕滑动门技术的实用性和可扩展性而出现的一些不确定因素，我们已经进行了补充和解决。愿这一技术不断地前进与提高。

经 A List Apart 杂志 及作者许可翻译本文。
Translated with the permission of A List Apart Magazine and the author[s].

本文的其他语言版本：

  英语 (A List Apart)
  意大利语 (gdesign.it)
  俄语 ({域名已经过期})

本文的作者Douglas Bowman是Stopdesign的创始人和主要负责人，他擅长于简单，明了，富有前瞻性的设计。他不断地打破和推进现有的网页标准所能够创造出来的效果极限。在去年广为人之的Wired News网站重设计中，Douglas担任首席设计师，但他也同时表示，不会永久持有此名誉。