Internet Explorer игнорирует действительно малые высоты, установленные в CSS

Question

У меня есть CSS, который выглядит следующим образом ...

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

... и затем я применяю этот стиль к элементу DIV:

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

Он отлично работает в браузерах, отличных от IE, но в IE он устанавливает высоту div в высоту одной строки текста, и это не отпустит меня меньше. Кто-нибудь знает, как обойти эту проблему?

Answer 1

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

Answer 2

Разве это не будет работать лучше и будет более семантическим?

<hr />

.

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

Answer 3

Вам необходимо указать высоту строки, если высота меньше, чем высота строки по умолчанию.

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

Answer 4

Я помню аналогичную проблему с интервалом / разделителем <div> s в IE. Я нашел эту страницу , которая помогла мне. Решение, которое я использовал, заключалось в том, чтобы поместить пустой комментарий в <div>, т.е.

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

Это кажется странным, но это работает.

Answer 5

Также установите стиль font-size:

font-size: 1px;

Answer 6

Вставьте неразрывный пробел (& nbsp;) в этот div, установите размер шрифта (и, возможно, высоту строки) в 1px, и все должно быть в порядке.

Answer 7

В зависимости от версии Internet Explorer, он будет использовать высоту, как если бы она была минимальной высотой, и увеличивать коробку, какой бы большой она ни была, как увеличение коробки.