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

Question

为了让卡片内部保持相同的长度，我使用了 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;
}

感谢您的帮助。

Answer 1

将此样式添加到卡片 class

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

并从 card>div

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

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

`Codepen Demo`

Answer 2

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

将属性 of 'flex' 或 'grid' 添加到您的 .card CSS class.

.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;
 }

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

How to keep the inner of the cards the same length in Mozilla Firefox?

css

firefox

mozilla

`Codepen Demo`