css 错误 - 仅适用于 iPhone 6/7/8 的图片库剪切的 div - flex 和网格

Question

我花了很多时间来解决一个只在 iPhone 上没有成功的 css 问题。 要使用网络检查器代码并查看 iphone safari 上发生的情况，我必须有一台 mac，但我没有这台电脑，所以我盲目编码。

我的 CSS 适用于大多数屏幕和机器人，我得到了这个结果(我期望的)

但是在 iphone 8 上，我得到了这个:

由于某些原因，照片更大，没有用两列组织，并且带有橙色边框的 .pr-section-inner-block 与其内容不匹配并剪切了画廊。也许它的行为是因为 flex 而获得与之前的 .pr-section-inner-block 相同的高度。

CSS

pr-section-inner{
    padding: 75px 0;
    display: flex;
    flex: 1;
}

.pr-section-inner .pr-section-inner-block{
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;

}

@media screen and (max-width: 767px)  {
    .pr-section-inner{
        border: 2px solid yellow;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-flex: 1;
    }

    .pr-section-inner .pr-section-inner-block{
        border: 2px solid orange;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-flex: 1;
    }

    .pr-section-inner .pr-section-inner-block .pr-section-inner-block-content{
        border: 2px solid red;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-flex: 1;
    }
}

有人有解决这个问题的想法吗？

Answer 1

我解决了这个问题。 似乎适用于 iPhone 的 Safari 会解释 display: flex; 即使行为是错误的。通常它应该只解释 display: -webkit-box; 所以我切换了这两个规则。

.h4a-pr-section-inner{
    border: 2px solid yellow;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-box; /* After display :flex; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
}