CSS min-height 不适用于 Mozilla firefox

Posted 2023-03-06

【中文标题】CSS min-height 不适用于 Mozilla firefox

【英文标题】：CSS min-height not working on mozilla firefox

【发布时间】：2012-12-12 18:09:18

【问题描述】：

我用最小高度创建了一个 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 以及背景颜色为红色。 （不知道我是否解释清楚。所以如果您想了解更多有关该问题的信息，请询问我。）

-谢谢。

已解决：感谢大家的友好回答。

【问题讨论】：

为什么你不只给出高度并清除两个div？告诉我？

对不起，我没明白你的意思。你能说清楚吗？

你需要什么你有固定的 li 宽度，而且它的父宽度似乎在这个 div 中只有一对 li 来了？请解释一下

【参考方案1】：

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

Source

【讨论】：

所以如果你也使用display: block;覆盖display: table(-*);，你可以使用min-height

经过深思熟虑和挠头：是的。只需使用普通的旧高度即可。 codepen.io/squarecandy/full/wWLNAV

对我来说，出于某种原因， display: table* 是唯一能让 min-height 在 Firefox 中正常工作的东西。这真的很烦人......

当我去掉 height: 100% for the parent of the element-height 时，一切又开始正常工作了。很奇怪。

【参考方案2】：

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

但该属性不适用于 firefox 上的 html 表格。

【讨论】：

谢谢。对于任何 display: table-* 元素，它似乎在 Firefox 中不起作用（错误 307866）。

【参考方案3】：

像这样更新你的CSS：

divmin-height:50px;width:500px;background-color:red;overflow:hidden;

overflow:hidden; 已添加

基本上，这是因为 .b 类中的 float:left。这就是它的工作原理。通常你可以通过添加overflow:hidden 到父 div 或者添加一个 style="clear:both;" 的元素来修复它。在父 div 的末尾。

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

【讨论】：

非常感谢，这行得通！我添加了溢出：隐藏到'div'。我会在6分钟后接受这个答案（这就是消息所说的）。感谢您的帮助...

【参考方案4】：

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

通过将元素切换为 display:block，firefox 遵循了 min-height 属性。

【参考方案5】：

将overflow: hidden; 添加到ul。

问题是您的LIs 是浮动的，这导致父级不知道其内容的高度。

【参考方案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;