ie6的又一个变态问题

要实现如下的布局：

最开始想的是：

<div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>

css如下：

#contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
#contain_right .tab .tab_title em{display:block;float:left;width:78px;height:34px;float:left;height:34px;text-align:center;font-size:14px;}

#contain_right .tab .tab_title em.selected{height:33px;background-color:#fff;border-width:2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}

不设置tab_title的overflow属性刚好可以在标准浏览器中正常显示，ie6除外。不管怎么用hack控制selected  em的高度都没法实现如图效果。

 后面改成在最里面放个span,绝对定位，

<div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>

#contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
#contain_right .tab .tab_title em{display:block;position:relative;float:left;width:78px;height:34px;float:left;}
#contain_right .tab .tab_title em span{position:absolute;width:78px;height:34px;text-align:center;font-size:14px;}
#contain_right .tab .tab_title em.selected span{height:33px;overflow:hidden;background-color:#fff;border-width:2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}

圈中的很重要，去掉ie6总会多一个像素。

ie6的又一个变态问题,布布扣,bubuko.com

ie6的又一个变态问题

原文：http://www.cnblogs.com/jiaojiaome/p/3615447.html