Safari 上的 Flexbox 错误答案

【问题标题】：Flexbox bug on safariSafari 上的 Flexbox 错误
【发布时间】：2021-04-07 23:39:21
【问题描述】：

我在 Safari 中遇到了一些 div 的问题，其他浏览器可以正常工作。有时，但不是每次，这些矩形会出现，扭曲布局，并重叠图像。它不会发生在我的本地服务器上，只是在我部署它时发生。

Take note of the background color appearing over the images

如果出现以下情况，它会自行修复：

我调整/缩放页面。
我打开网络检查器（只打开它，而不是其他任何东西）
我刷新页面——有时

这就是我为三个 div (.ldb-part) 和它们的父 div (.ldb) 所拥有的：

HTML：

        <div class="ldb">
        <div class="ldb-part">
            <h3>Landscape</h3>
            <img src="/Image1.jpg" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
        </div>
        <div class="ldb-part">
            <h3>Design</h3>
            <img src="/Image2.jpg" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
        </div>
        <div class="ldb-part">
            <h3>Build</h3>
            <img src="/Image3.jpg" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
        </div>
        </div>

CSS：

.ldb {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;

    justify-content: center;

    position: absolute;
    top: 93%;
    max-width: 70vw;
    height: 20em;
    padding-bottom: 4em;
}

.ldb-part {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;

    justify-content: space-around;

    flex-direction: column;

    text-align: center;

    width: 30%;
    height: inherit;
    margin: 0 1em;
    padding: .5em;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    background: #FFFDF8;
}

【问题讨论】：

标签： html css flexbox safari

【解决方案1】：

根据我的经验，flexbox 在 Safari 中根本不起作用，但是当我用网格显示替换它时它起作用了。

使用网格显示可以解决这里的问题

    .ldb-part {
    display: grid;
    grid-template-rows: auto auto;

    align-items: center;
    justify-content: space-around;

    text-align: center;

    width: 30%;
    height: inherit;
    margin: 0 1em;
    padding: .5em;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    background: #FFFDF8;
}

【讨论】：

感谢您的回复，我刚刚添加了 HTML。我可能会尝试将 ldb-part div 改为网格...
我替换了图像，所以我的结果更清晰。 .ldb div 在页面上很好地对齐，它还正确地对齐了其中的 .ldb-part div。但是，.ldb-part div 会弄乱它们的子元素。
父元素上的flexbox通常会破坏子元素的定位，但我认为这些行之一造成了麻烦： justify-content: space-around;弹性方向：列；文本对齐：居中；
再次感谢您。我已经尝试了您的网格解决方案，甚至完全取消了 .ldb-part 的显示（以及它的其他属性对齐、对齐等），并且我设法将奇怪的矩形从图像向下移动到文本。不过仍然出现在我面前。

【解决方案2】：

虽然 Webkit 引擎浏览器 Safari 声称支持 display: flex，但我的发现表明 Webkit 引擎部分支持它，它有时会相互叠加子项。这很奇怪，但旧规范显示：-webkit-box 在这种情况下按预期工作。

【讨论】：

【解决方案3】：

This workaround for a separate issue 似乎是我的问题的创可贴解决方案。

希望它不会返回...

【讨论】：