html - IE7/8 的 Div 太高

Question

我刚刚浪费了一天的时间试图自己找到答案。

我应该有 this (works on FF) ，但是对于 IE7/8(我必须兼容 IE7/8)，我有 this .

代码如下:

<DIV style="HEIGHT: 10px" class="timeline">
    <DIV style="WIDTH: 24px; LEFT: 0px" class=separator title=W1>
        <DIV class=left></DIV>
        <DIV style="WIDTH: 24px" class=bar></DIV>
        <DIV class=right></DIV>
    </DIV>
    <DIV style="WIDTH: 156px; LEFT: 24px" class=separator title=W2>
        <DIV class=left></DIV>
        <DIV style="WIDTH: 156px" class=bar></DIV>
        <DIV class=right></DIV>
    </DIV>
</DIV>

和 CSS:

body{
    margin:0;
    padding:0;
}
.timeline{
    position:absolute;
    height:10px;
    margin-top:15px;
    margin-left:20px;
}
.timeline .separator{
    position: absolute;
    height:20px;
}
.timeline .separator .left{
    position: absolute;
    background-color: #000;
    left: 0;
    width: 1px;
    height: 10px;
}
.timeline .separator .bar{
    position: absolute;
    margin-top:4px;
    background-color: red;
    height:2px;
}
.timeline .separator .right{
    position: absolute;
    background-color: #000;
    right: 0;
    width: 1px;
    height: 10px;
}

感谢您的帮助!

Answer 1

即使您的 .bar div 没有文本内容，IE7 也会始终将其设置为包含当前字体大小的文本时的高度。修复起来很简单，只需添加字体大小和行高:

.timeline .separator .bar{
    position: absolute;
    margin-top:4px;
    background-color: red;
    height:2px;
    font-size: 0px;
    line-height: 0px;
}