如何在Mozilla Firefox中使卡的内部长度相同？

如何解决如何在Mozilla Firefox中使卡的内部长度相同？

为了使卡片的内部长度相同，我使用CSS 高度：100％和 display：table 。在CHROME和EDGE中，它可以正常工作。但是在Mozilla Firefox中不起作用。内部从其父级中退出。

此视频https://youtu.be/6uO-9UNGXFw中的更多详细信息

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

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

谢谢您的帮助。

解决方法

将此样式添加到 card 类

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

并从 card> div

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

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

Codepen Demo

,

1. 从height: 100%删除.card > div的规则

2. 从display: table删除.card > div的规则

3. 在您的.card CSS类中添加“ flex”或“ grid”的diplay属性。

   .card > div {
        padding: 2rem;
        background-color: rgba(255,255,.5);
        box-shadow: 0 0 2rem rgba(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;
    }