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

时间：2011-05-18 来源：terminatorheart

今天在测试一个页面在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-
}
.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-
}
.mainCont .Tab_hd span{
        position:absolute;
        left:8px;
}
*.mainCont .Tab_hd span{
        top:0;
}

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