CSS min-height не работает на mozilla firefox

Я создал тег div с минимальной высотой и дал цвет фона "красный". но на mozilla firefox высота div не увеличивается, когда содержимое пересекает минимальный предел высоты. heres мой код:

<style type="text/css"><!--
ul {
    display:block;
    padding:0px;
    width:500px;
}

.b {
    width:250px;
    float:left;
    display:block;
}

div {
    min-height:50px;
    width:500px;
    background-color:red;
}
--></style>

<div>
    <ul>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
    </ul>
</div>

его, казалось бы, высота div должна быть установлена в соответствии с содержимым, но я не знаю, как еще я могу это сделать. Если я не использую высоту, тогда фоновый цвет не может быть установлен. как я могу поместить содержимое в div, а цвет фона будет красным.

(Не знаю, ясно ли я это объяснил. Также спросите меня, хотите ли вы узнать больше об этом вопросе.)

-Спасибо.

RESOLVED: благодарим всех за ваши добрые ответы.

Ответ 1

Обновите свой css следующим образом:

div{min-height:50px;width:500px;background-color:red;overflow:hidden;}

overflow:hidden; добавлен

В принципе, это происходит из-за float:left в классе .b. Вот как это работает. Обычно вы можете исправить это, добавив overflow:hidden в родительский div или добавив элемент со стилем = "clear: both;" в конце родительского div.

Вы можете найти дополнительную информацию об этом с помощью ключевых слов CSS clearfix.

Ответ 2

В Firefox min-height не интерпретируется в свойствах display: table(-*);, просто попробуйте использовать height: 50px; вместо этого, поскольку он интерпретируется как минимальная высота для таблиц.

Источник

Ответ 3

Свойство min-height поддерживается во всех основных браузерах.

Но это свойство не работает с html-таблицами в firefox.

Ответ 4

Добавьте overflow: hidden; в ul.

Проблема заключается в том, что ваш LI плавает, что заставляет родителя не знать высоту его содержимого.

Ответ 5

Если для отображения элементов установлено значение таблицы, firefox будет игнорировать свойство min-height без фактической установки высоты.

Переключив элемент на дисплей: block, firefox затем уважает свойство min-height.

Ответ 6

Я добавил следующее и работал:

body {
  height:100%;
}

Ответ 7

Вам нужно очистить плавающие вложенные теги li следующим образом:

ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Ответ 8

вместо min-height: 50px; просто добавьте отступы: 25px 0;