1

我有一个在 Safari > 9 上看起来与预期一样的布局。但在 Safari 9 上，布局被破坏了：它看起来像这样。在此处输入图像描述

这是我的代码。

.card h4 {
    min-height: 90px;
}

.card p {
    font-size: 0.875rem;
}

.figure-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
}

@media (min-width: 768px) {
    .card h4 {
        min-height: 140px;
    }

    .card p {
        font-size: 1.25rem;
        line-height: 1.7rem;
    }

    .card-0 {
        background: #F7F7F7;
    }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
    <div class="container">
        <div class="row">
            <div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3">
                <div class="card  p-3 pb-4  p-md-4 p-md-b-5 h-100" style="background: #F9f9f9;">
                    <h4 class="title-four">Lorem</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </p>
                </div>
            </div>

            <div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
                <div class="card  p-3 pb-4  p-md-4 p-md-b-5 h-100" style="background: #EAD2F7;">
                    <h4 class="title-four">Ad asperiores</h4>
                    <p>
                        Ad asperiores delectus deleniti dolorem, esse et exercitationem expedita fuga ipsam, labore maxime natus porro quam quisquam, rerum sapiente temporibus vel vitae?
                    </p>
                </div>
            </div>

            <div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
                <div class="card p-3 pb-4  p-md-4 p-md-b-5 h-100" style="background: #D2EEE7">
                    <h4 class="title-four">consectetur adipisicing</h4>
                    <p class="">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt exercitationem explicabo neque nobis possimus quaerat suscipit? Aliquid cum ea earum enim non quod reprehenderit voluptatem. A ad id maiores unde.
                    </p>
                </div>
            </div>
            <div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3">
                <div class="card  p-3 pb-4  p-md-4 p-md-b-5 h-100" style="background: #F9f9f9;">
                    <h4 class="title-four">Lorem</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </p>
                </div>
            </div>

            <div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
                <div class="card  p-3 pb-4  p-md-4 p-md-b-5 h-100" style="background: #EAD2F7;">
                    <h4 class="title-four">Ad asperiores</h4>
                    <p>
                        Ad asperiores delectus deleniti dolorem, esse et exercitationem expedita fuga ipsam, labore maxime natus porro quam quisquam, rerum sapiente temporibus vel vitae?
                    </p>
                </div>
            </div>

            <div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
                <div class="card p-3 pb-4  p-md-4 p-md-b-5 h-100" style="background: #D2EEE7">
                    <h4 class="title-four">consectetur adipisicing</h4>
                    <p class="">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt exercitationem explicabo neque nobis possimus quaerat suscipit? Aliquid cum ea earum enim non quod reprehenderit voluptatem. A ad id maiores unde.
                    </p>
                </div>
            </div>
        </div>
    </div>

我希望它看起来像这样。

在此处输入图像描述

我想问题出在flex-column. 如果我不使用它，布局的结构很好，但列不再具有相同的高度。我不明白为什么这是因为 Safari 9 支持flex-direction: column（caniuse）。

如何解决这个问题？

4

0 回答 0