这个东西描述还是比较困难的,表达能力不好,不过有了图就直接了呵呵

tabs css

关键点就在于下面这条横线,当选中的时候这条横线看不见了,这个东西肯定很多人都遇到过,也折腾了不少时间和精力,为了以后的一劳永逸,我们现在来分析下解决方案。先贴出核心html代码

html code

<ul class="tabnav nostyle">
<li><a href="#" class="active">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>

注:这里的nostyle class是为了调用我重置里面设置的ul为list-style:none等

第一种方法:对ul的浮动不清除,设置ul的高度和a的高度

思路:先设置a标签的高度和border,及背景色,当处在激活状态时,border-bottom和它的背景色一样,然后设置ul的border-bottom为下面的那根线,因为ul没有清除浮动,所以这个下划线默认应该是在上面的,然后给ul设置一个高度,让这个高度正好等于a的高度加a的border-top的高度,这样ul的border-bottom和a的border-bottom刚好重叠。当然ie6因为给ul设置了高度,激活了它的haslayout,使ul的高度实际表现为a的高度加上a的top和bottom高度,这样就不能达到我们的重叠效果了,为了解决这个问题我们给ie6打上bug,设置ul的overflow为hidden,那样ul就表现为我们设置的实际高度了,而不会随着子元素的高度的增加而增加。可是这样ie6还是不能正确显示出那个激活状态的border-bottom,这样我们又得打上一个bug,那就是设置它的position为relative,这样就解决了

html code

<div id="demo1" class="demo">
<ul class="tabnav nostyle">
<li><a href="#" class="active">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
</div>

css code

ul.tabnav li{
float:left;
display:inline;
margin-left:8px;
}
.tabnav li a{
background-color:#CCFFCC;
border:1px solid #66CC66;
color:#666;
display:block;
padding:0 5px;
line-height:20px;
float:left;
font-weight:bold;
}
.tabnav li a.active,
.tabnav li a:hover{
background-color:#fff;
border-bottom:1px solid #fff;
_position:relative;
}
#demo1 .tabnav{
border-bottom:1px solid #66CC66;
height:21px;
_overflow:hidden;
}

第二种方法:负margin

思路:对ul进行清除浮动(用clearfix方法),然后设置border-bottom。既然清除浮动了,那么ul现在可以正确包裹里面的元素了,然后我们对a元素设置margin-bottom为负的1px(即ul的border-bottom值),那样就刚好把a标签的border-bottom和ul的border-bottom重叠上,再对激活状态的border-bottom进行颜色改变,就好了。当然ie6默认对负margin值不能良好表现出来,需要设置position为relative和激活haslayout,在这里因为a已经激活了haslayout,所以只要加上position:relative就可以表现正常了

html code

<div id="demo2" class="demo">
<ul class="tabnav nostyle clearfix">
<li><a href="#" class="active">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
</div>

css code

/* 加上前面的共用样式 */
#demo2 .tabnav li a{
margin-bottom:-1px;
}
#demo2 .tabnav{
border-bottom:1px solid #66CC66;
}

到这里这两种方案都说完了,如果你是崇尚简单标签的人,你会发现其实这个完全可以不用ul来做,直接a标签一个接一个,然后外面包裹个div或者h标题什么的,简单方便

注:这两个解决方案,第一个算是很巧的了,但是偏偏ie6如果元素激活了haslayout,它的高度是随着子元素的高度增加而增加,而不是我们设置的高度那么简单,这也正是我们用来解决ie6的最小高度的这个问题的核心思路,在这里这个反而成了累赘呵呵。第二个主要是对负margin的运用及其在ie6下的bug解决。其实这里还隐藏了一个小知识,那就是a标签的点击范围,ie6下经常会出现a标签只有滑到文字上面才能点击,小心点哦,当然这里是处理了的

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持