html - IE7/8でDivが高すぎる

Question

自分で答えを見つけようとして1日を無駄にしました。

私はこれを持っている必要があります（FFで動作します）が、IE7 / 8（私はIE7 / 8に準拠している必要があります）ではこれを持っています。

コードは次のとおりです。

<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 は常に、現在のフォント サイズでテキストが含まれている場合の高さになります。font-size と line-height を追加するだけで簡単に修正できます。

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

Answer 2

あなたの問題はline-heightです。0pxに設定すると動作します:)