November 2008

本文主要讨论的就是导航tab的底部灰线如何用CSS实现，而不是用背景图片实现。用CSS实现的好处是可以避免浏览器发起一次图片请求，另一个是可以方便地改变颜色、尺寸。 做法是用ul和li标签生成tab，在ul的外部用p标签包围，导航底部的那条细线，就是p标签的bottom-border。 过程中遇到的一个难题是，高亮的tab，是白色背景，该tab底部没有border，应该也是白色的。但用普通的方法没法做到，如上面第2个图，“首页”那个tab的出现了底部border。因为p标签是ul和li的外层容器，内部的所有元素默认都在p标签的范围内，无法跨越p的边界。 通常这种导航的底部实现都是用背景图片代替，这样的理由是：1、背景图片的位置可调，可以不用紧紧挨着边框，比如离bottom有4px的距离；2、背景图片显示在最低层，p容器内的任何元素都可以覆盖住背景图片。高亮tab的底部没有border的效果就是靠白色背景挡住了p的背景图片做到的。 基于这种思想，我考虑可以用什么方式让内部元素挡住外层元素呢？ ul元素的position属性设置为absolute，p标签的position设置为relative。这样ul就定义在p标签内浮动，默认top和left都是0，即p的左上角。同时，ul会覆盖住p。只要p的height刚好比ul的height小1px就可以，也就是让ul中li的bottom-border刚好和p的bottom-border在同一个垂直高度上。注意，p标签的overflow属性必须是visible（默认值），也就是说只要你不把overflow设置成其他值就没问题。 经过上面的步骤，可以总结出几个关键点，按重要顺序排列： ul和p的position属性，分别是absolute和relative（这里告诉你为什么这样设置） p的高度应该比ul小1px（根据你的需要，小几个px都可以） overflow属性必须使用visible 通过这几个关键点，你就可以基本实现图1的效果，不过还要针对不同浏览器做小小的css hack。 hack的关键点就是p的height值，在我这里，Firefox2/3、Chrome、Opera适合27px，IE7、Safari适合26px，IE6适合25px。 现在我唯一的问题是不知道怎么写出专门适用于Safari的CSS定义，所以在Safari下是图3的效果，其实就差1px，回头找到方法再补充吧。