Проблемы с высотой пустого элемента в IE - PullRequest
Новая
       5

Проблемы с высотой пустого элемента в IE

1 голос
/ 29 марта 2012

Я хочу реализовать пустой div с цветом фона.

<html>
<head>
    <style>
        .dark_green {
            background-color: #00D100;
            width: 20px;
            height: 4px;
        }

    </style>
</head>
<body>
    <div class="dark_green"></div>
</body>
</html>

В IE7 / 8/9 высота этого div не равна 4px, он автоматически меняется на 19px;Под FF и другим хромом это правильно.

Есть предложения?

Ответы [ 5 ]

3 голосов
/ 29 марта 2012

Это зависит от того, что вы пытаетесь сделать.Есть несколько вещей, которые сработают: 

    .dark_green {
        [...]
        line-height:4px;
    }

или 

    .dark_green {
        [...]
        overflow:hidden;
    }

Оба сработают.

Причина, по которой это происходит, заключается в том, что текст в вашем DIV(даже если это просто пробел) имеет высоту строки 19px.Проблемные браузеры используют это значение вместо того, которое вы устанавливаете в качестве запасного варианта, чтобы не обрезать текст.Скажите браузеру, что вы хотите, чтобы текст был меньше (font-size:4px;), высота строки была меньше (line-height:4px;), или текст, который нужно обрезать (overflow:hidden;), должен исправить проблему.

ПричиныЯ бы не использовал размер шрифта в этом контексте:

  1. Это работает только потому, что высота строки, которая наследуется при применении нового размера шрифта, так что вы могли бы такжепросто установите правильное свойство.

  2. У некоторых браузеров минимальный размер шрифта больше 4px (11px на FF, не уверен, что вы можете установить это в IE), что означает, что еслиУ пользователя установлен минимальный установленный минимум, ваше исправление не будет работать.

1 голос
/ 29 марта 2012

Добавьте doctype в качестве самой первой строки, например <!DOCTYPE html>, для выхода из режима quirks .Это важно сделать, иначе у вас будут бесконечные проблемы с IE.

После того, как вы это сделаете, ваш оригинальный код будет работать в IE7 и более поздних версиях, как в Firefox / Chrome.

0 голосов
/ 26 сентября 2013

Другой способ - просто добавить это в смесь: добавить пустой комментарий в качестве содержимого div. Да, добавление дополнительной разметки, но это работает: 

<div><!-- --></div>
0 голосов
/ 07 февраля 2013

добавьте любой элемент в div, который вы хотите свернуть, и установите для отображения на этом элементе значение none.

если ваша проблема div 

<div class="collapseToZero"></div>

Добавить что-то вроде этого: 

<span class="nothing"></span>

и добавьте этот стиль для класса 

.nothing{display:none;}

и ваш полученный HTML будет выглядеть так 

<div class="collapseToZero">
   <span class="nothing"></span>
</div>

Теперь, т.е. 7 будет отображать вашу проблему div с высотой нуля вместо размера шрифта.

0 голосов
/ 29 марта 2012

Я нашел это решение: 

font-size: 4px;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...