用CSS实现Tab导航

本文主要讨论的就是导航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,回头找到方法再补充吧。

IE6 CSS Hack

最近在做一些UT的工作,写一些HTML和CSS,又遇到了一直很头疼的浏览器兼容问题。 主要就是让人讨厌的IE6,总是需要进行很多特殊的处理。 遇到表格类型的HTML区域,我一直觉得用table是最合适的,解决局部的单层表格,table是最方便的,HTML语言加入table这个标签的初衷就在这里。 不过因应用需要,我这回必须要用div实现table的布局,只能硬着头皮搞了。 对表格区域,我用ul标签,用li作为每行的容器。 在每个li标签中,用div作为列单元的容器。 这会遇到几个问题,同时也有一些优点吧: (缺点)列的宽度必须用样式来定义,比如每行相同的列单元,都必须使用相同的class,在css中给这个class定义绝对宽度,用width=240px这类的语句,代码冗余比较多 (缺点)每个div必须添加float:left的css定义,因为div是块状元素,默认是按行竖着排列的,设为浮动元素后,才可以横着排列 (缺点)float:left这个属性的排列方式,我总结的是按左上原则,可以理解为左上角是引力中心,把每个float元素都紧紧地吸附着,如果右侧有空间,就顺序排列在右侧,如果没空间了,就到下面一行尽量靠左的位置开始排列……,因此如果宽度不够,改行左边单元的高度又高于其他单元,那么最右侧的单元会卡在左边的单元右侧,呃,可能不好理解,回头我给个图,专门说一下这个规则 (缺点)li的高度默认不是自适应,当div单元的高度很大时,会突破li容器,影响下一行li的显示,呃……不过这个是有办法解决的,这篇文章主要就是来说明这个解决办法 (优点)div对浏览器来说就是一个简单的元素,浏览器每读完一个div,就可以立即显示,不必等待所有html代码都下载完才画出页面,这也是大家不喜欢table的主要原因 (优点)每行都有自己单独的列元素,每列的宽度可以不一致,这点table很难做到,即便能做到,也是用非常绕弯的方法,而用li+div来解决,就很灵活 看似缺点比较多,不过缺点都可以解决。 下面列举几个方法,就不一一对应了,其实道理都是相通的: […]