仍未结束，因为加入了9个像素的padding使左边图像与标签的左边之间产生了一段空白。现在，左侧与右侧，可见“doorway”的边缘接在一起，我们再不需要将左边图像保持在上方。于是，交换两幅背景图像的顺序，相反过来。同样交换“当前”标签中使用的两幅图像：#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;
}
完成这些后，我们到达了效果4。要注意的是，透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外，但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域，那么我们必须使用在标签后面使用颜色，然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。
---
对于剩下的问题，我们将一次性完成全部的修改：加重标签文本，将普通标签中的文本改为棕色，“当前”标签文本改为深灰色，去掉链接的下划线，最后将悬停文本色彩改为同样的深灰色。经过一系列的改变，我们将看到目前为止的效果5。
一致性的解决
在效果2之后，我们公认的一个问题就是在IE5/Mac浏览方式下，每个标签延伸并占据了整个浏览器的宽度，以致标签垂直的堆在了一起。这不是我们所希望的。
在大多数的浏览器中，浮动一个元素会有收缩，收缩最小至它所包含内容的大小。如果一个浮动元素包含一幅图像或其本身即图像，便会收缩至图像的宽度。如果仅仅包含文本，那么将会收缩至最长的，不可被顶开的那文本的宽度。
一个问题出现在IE5/Mac中的图片中，当一个auto-width的块对象元素被插入到一个浮动的元素中时。其他的浏览器仍旧将浮动缩小至最小，而无视容器内的块对象元素。但IE5/Mac并不按照这种情况，相反它将浮动和块对象元素扩展至尽可能的宽度。为解决这个问题，我们将锚链同时浮动起来，但仅仅对于IE5/Mac，以免放弃其他的浏览器。首先，我们为锚链设定浮动规则。然后，我们使用反斜杠注释法来隐藏这种规则，让它仅仅对IE5/Mac生效，而无视其他的浏览器： #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 */
现在IE5/Mac浏览器将按我们所期望的那样来显示标签，看效果6。对于非IE5/Mac的浏览器什么都不需要改变。注意到IE5.0/Mac的一系列解释上的bug在IE5.1中解决。因此，滑动门技术在5.0版本中所遭遇的问题超出了hack的限度。既然升级到IE5.1/Mac已不成难题，OS 9 Macs/IE5.0的占有率应逐渐缩减至很低。
举一反三
我们刚刚演练了滑动门技术，用纯文本和无序列表来创造导航标签，加以少量的样式。它的装载速度快，具有可维持性，并且文本的大小可以在不破坏外观的情况下进行较大的伸缩。不必我们再重申在创造复杂样式的导航栏中，滑动门技术所表现出来的弹性了。
只有想不到，没有做不到。最终效果向我们展示了一例，但我们设计不可能因此而被限定死。
上一篇:比较流行的趣味短信
下一篇:百度还能走多久
|
精品推荐