如何在 Mozilla Firefox 中保持卡片内部的长度相同？答案

【问题标题】：How to keep the inner of the cards the same length in Mozilla Firefox?如何在 Mozilla Firefox 中保持卡片内部的长度相同？
【发布时间】：2020-09-12 15:18:02
【问题描述】：

为了保持卡片内部的长度相同，我使用了 CSS height:100% 和 display:table。在 CHROME 和 EDGE 中它工作正常。但它在 Mozilla Firefox 中不起作用。内部从其父级中拉出。

更多详情请看这个 yt 视频https://youtu.be/6uO-9UNGXFw

这是我的代码https://codepen.io/Dvorakova/pen/yLOjqeP

.card>div {
    height: 100%;
    display: table;
}

感谢您的帮助。

【问题讨论】：

标签： css firefox mozilla

【解决方案1】：

从.card > div中删除height: 100%的规则
从.card > div中删除display: table的规则

将“flex”或“grid”的显示属性添加到您的.card CSS 类。

.card > div {
     padding: 2rem;
     background-color: rgba(255,255,255,.5);
     box-shadow: 0 0 2rem rgba(0,0,0,.1);
     border-radius: 1.5rem;
     text-align: center;
 }
 .card {
     background: #f55053;
     background: linear-gradient(45deg,#f55053 0,#f9a18a 100%);
     border-radius: .75rem;
     padding: .75rem;
     transition: all .3s ease;
     display: flex;
 }

【讨论】：

【解决方案2】：

将此样式添加到 card 类

.card {
    display:grid;
    height: auto;
}

并在 card>div

中添加 height:-webkit-fill-available; 而不是 height:100%

.card>div {
    height:-webkit-fill-available;
}

`Codepen Demo`

【讨论】：