Css Can'；不要让flexbox为safari工作（仅限），它可以在其他任何地方工作

我一直在绞尽脑汁想弄明白为什么我的页面不能在Safari上正确显示。它与所有其他浏览器都很好地配合，直到我在手机上检查了它

我需要添加什么才能使此工作正常

我曾尝试在网上添加自动前缀，但没有任何运气

div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.left-half {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
    }

.right-half {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.feature-image {
  background-color: #262626;
  -webkit-box-flex: 1.25;
      -ms-flex: 1.25;
          flex: 1.25;
}

.contents {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2rem;
}   

.contents-bg {
    background: rgba(0,0,0,0.6);
    padding: 2rem;
}

    .cover-image {
max-width:100%;
max-height:auto;
height:-webkit-fit-content;
height:-moz-fit-content;
height:fit-content;
-o-object-fit: cover;
   object-fit: cover;
}
    @media screen and (max-width: 800px) {
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
      flex-flow: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.feature-image {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}
.cover-image {
max-width:100%;
max-height:auto;
height:auto;
-o-object-fit: cover;
   object-fit: cover;
}
.page-bg {
    background: #262626 url(https://www.bangbang.com.au/wp-content/themes/bang-bang/images/repeat-overlay.png);
    background-position: center 4.6rem;
    background-size: 28%;
    }
}

“class=”封面图片“>
“class=”封面图片“>

---

这是指向live站点及其内容的链接

尝试添加

显示：-webkit flexbox。它在大多数情况下都有效。
尝试添加
显示：-webkit flexbox。在大多数情况下都有效。
有人能帮忙吗？我想我什么都试过了，但还是动不了……有人能帮忙吗？我想我已经尝试了所有的方法，但仍然无法让它改变…谢谢你的回答-我已经找到了一个解决方案，这与我的代码无关。这是以前的开发-由于某种原因，一些div样式的冲突只在safarai上引起了混乱。现在一切都好了！哦，我很高兴你找到了答案，这就是为什么我们都在这里：）谢谢你的回答-我找到了一个解决方案，这与我的代码无关。这是以前的开发-由于某种原因，一些div样式的冲突只在safarai上引起了混乱。现在一切都好了！哦，我很高兴你找到了答案，这就是为什么我们都在这里：）
<!--First Row -->

<section class="container">
<div class="left-half">
<div class="contents"><div class="contents-bg">
<?php the_field('function_one_content'); ?></div>
</div>
  </div>
  <div class="feature-image">
<img src="<?php echo the_field('function_one_image');?>" class="cover-image">
  </div>
</section>

    <section class="container">
     <div class="feature-image">
<img src="<?php echo the_field('function_two_image');?>" class="cover-image">
  </div>
  <div class="right-half">
      <div class="contents"><div class="contents-bg">
          <?php the_field('function_two_content'); ?></div>
    </div>
  </div>
</section>