safari上的Flexbox错误

Question

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

注意图像上出现的背景颜色

如果：，它会自行修复

1. 我调整页面大小/缩放页面
2. 我打开web检查器(只打开它，不打开其他任何东西(
3. 我刷新页面--有时

这是我为三个div(.ldb部分(和它们的父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;
}

Answer 1

这个针对单独问题的解决方案似乎是针对我的问题的创可贴解决方案。

希望它不会回来。。。

Answer 2

虽然Webkit引擎浏览器Safari声称支持display:flex，但我的发现表明Webkit引擎部分支持它，它有时会将子代相互覆盖。这很奇怪，但旧的规范显示：在这种情况下，webkit框可以正常工作。

Answer 3

根据我的经验，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;
}