Question

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

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

-Thanks。

已决议： 感谢大家的回答。

Answer 1

在Firefox上，min-height未在display: table(-*);属性上解释，juste尝试使用height: 50px;，因为它被解释为表格的最小高度。

Source

Answer 2

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

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

Answer 3

像这样更新你的CSS：

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

overflow:hidden;已添加

基本上，这是因为float:left类中的.b而发生的。这就是它的工作原理。通常你可以通过将overflow:hidden添加到父div或添加一个style =＆＃34; clear：both;＆＃34;在父div的末尾。

您可以使用＆＃39; CSS clearfix＆＃39;来搜索有关它的更多信息。关键字。

Answer 4

将overflow: hidden;添加到ul。

问题是您的LI被浮动，导致父母不知道其内容的高度。

Answer 5

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

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

Answer 6

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

package.phone.appxmanifest for Windows Phone 8.1
package.windows10.appxmanifest for Windows Phone 10 Universal

Answer 7

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

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

Answer 8

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

CSS min-height无法在mozilla firefox上运行

8 个答案: