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;
}

Answer 2

您的问题是line-height。将它设置为0px，它将工作：）

与IE7 / 8相比，它太高了

2 个答案: