关于IE6下line-height失效的一种诡异情况

今天在测试一个页面在IE6下的兼容性的的时候出现了一些问题，

代码如下:

html部分:

<p class="Tab_hd Second">M选N课程(名称)<span>总数:5门,应选:3门</span></p>

css部分:

.mainCont .Tab_hd{
position:relative;
color:#fff;
text-align:center;
font-size:14px;
background-color:#AFCEA5;
line-height:30px;
}
.mainCont .Tab_hd span{
position:absolute;
left:8px;
}

测试截图如下：

chrome:



firefox4.0:



IE8:



IE8下的IE7模式:



最后我们再来看看万恶的IE6:



可见，IE6和IE7的line-height没有起到应有的作用，并且，更糟糕的是，IE6连positio属性都没有给予正确的解释，通过反复试验，终于确定是css少加了一句:width:100%;

加上之后，高度是对了，但是两处的文本在IE6,7下还有一个落差，这时候就得借助于css hack了，最后完工的css如下:

.mainCont .Tab_hd{
position:relative;
width:100%;
color:#fff;
text-align:center;
font-size:14px;
background-color:#AFCEA5;
line-height:30px;
}
.mainCont .Tab_hd span{
position:absolute;
left:8px;
}
*.mainCont .Tab_hd span{
top:0;
}

这样在IE6,7下的显示效果与正常情况下的chrome和firefox就一致了