Internet Explorer ignoriert wirklich kleine Höhen, die in CSS festgelegt sind

Question

Ich habe ein CSS, das wie folgt aussieht...

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
}

... und dann wende ich diesen Stil auf ein DIV-Element an:

<div class="ColorSeparatorArea"></div>

Es funktioniert gut in nicht-IE-Browsern, aber in IE, es setzt die Höhe des div auf die Höhe einer Zeile des Textes, und es wird nicht zulassen, dass ich eine kleinere gehen. Weiß jemand, wie man dieses Problem umgehen kann?

Answer 1

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
    overflow: hidden;
}

Answer 2

Würde dies nicht besser funktionieren und mehr Sinn ergeben?

<hr />

.

hr
{
    border: 1px solid #3d3d77;
}

Answer 3

Sie müssen die Zeilenhöhe angeben, wenn die Höhe geringer ist als die Standardzeilenhöhe.

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
    line-height: 1px;
}

Answer 4

Stellen Sie auch die font-size Stil:

font-size: 1px;

Answer 5

Ich erinnere mich, dass ich ein ähnliches Problem mit dem Abstandshalter/Trenner hatte. <div> s im IE. Ich fand diese Seite was mir geholfen hat. Die Lösung, die ich benutzte, bestand darin, einen leeren Kommentar in die <div> d.h.

<div class="ColorSeparatorArea"><!-- --></div>

Das scheint seltsam zu sein, aber es funktioniert.