CSS min-height不适用于mozilla firefox

I created a div tag with min-height and gave background color 'red'. but on mozilla firefox the height of the div not increasing when the content crosses min-height limit. heres my code:

我用min-height创建了一个div标签,并给出了背景颜色“红色”。但是在mozilla firefox上,当内容超过最小高度限制时,div的高度不会增加。继承我的代码:

<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>

its seeming the div height would have to be set to fit contents,but I don't know how else can I do that.if I don't use height then background-color can't be set.please tell me how can I fit the contents to the div as well as the background color would be red.
(Don't know if I explained it clearly.so please ask me if you want to know more about the question.)

它似乎div高度必须设置为适合内容,但我不知道我怎么办呢。如果我不使用高度,那么背景颜色就无法设置。请告诉我我该怎么办?使内容适合div,背景颜色为红色。 (不知道我是否清楚地解释了。如果你想了解更多关于这个问题,请问我。)

-Thanks.

RESOLVED: thank you everybody for your kind answers.

决议:谢谢大家的回答。

8 个解决方案

#1

Update your css like this:

像这样更新你的CSS:

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

overflow:hidden; added

Basically, that happens because of float:left in .b class. That is how it works. Usually you can fix it by adding overflow:hidden to parent div or by adding an element with style="clear:both;" at the end of parent div.

基本上,这是因为浮动:左边的.b类。这就是它的工作原理。通常你可以通过添加overflow:hidden到parent div或添加一个style =“clear:both;”的元素来修复它。在父div的末尾。

You can search more info about it with 'CSS clearfix' keywords.

您可以使用“CSS clearfix”关键字搜索有关它的更多信息。

#2

On Firefox, min-height is not interpreted on display: table(-*); properties, juste try to use height: 50px; instead as it is interpreted as minimum height on tables.

在Firefox上,min-height不会在显示中解释:table( - *);属性,juste尝试使用高度:50px;而是因为它被解释为表上的最小高度。

Source

#3

The min-height property is supported in all major browsers.

所有主流浏览器都支持min-height属性。

But this property is not working with html tables on firefox.

但是这个属性不适用于firefox上的html表。

#4

Add overflow: hidden; to ul.

添加溢出:隐藏;到ul。

The problem is that your LIs are floated which causes the parent to not know the height of it's contents.

问题是你的LI浮动,导致父母不知道它的内容的高度。

#5

When an element's display is set to table, firefox will ignore the min-height property without actually setting the height.

当元素的显示设置为table时,firefox将忽略min-height属性而不实际设置高度。

By switching the element to display:block, firefox then respected the min-height property.

通过将元素切换为display:block,firefox然后尊重min-height属性。

#6

I have added following and it's worked:

我添加了以下内容并且它有效:

body {
  height:100%;
}

#7

You'll have to clear the floating of the nested li tags like this:

您必须清除嵌套li标签的浮动,如下所示:

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

#8

instead of min-height:50px; just add padding: 25px 0;

而不是min-height:50px;只需添加填充:25px 0;

#1