Flexbox 内容在 Safari 16 中重叠

Question

我正在 Webflow 中处理一个页面，地球上的每个桌面和移动浏览器都能够显示布局，除了 safari 16，它使

.about-content

和

.about-header

像编织线一样重叠（是的，

 .about-header

是图像网格，因此

.about-content

重叠在一个图像上并位于另一图像后面）。

在发布

flex-shrink: 0;

作为解决方案之前，请阅读代码。已经应用了。

由于我在 Webflow 中工作，我只能从开发检查中复制粘贴 html 和 css，并且替换了图像链接并删除了 srcset。我也不知道为什么网格区域在 jsfiddle 中不起作用，但在生产中却起作用。

Answer 1

当然！由于我无法直接看到实际问题，因此我可以提供一些建议来调整您现有的代码，这可能有助于缓解您在 Safari 16 中遇到的重叠问题。请记住，您可能需要根据情况迭代和调整这些更改您观察到的实际行为。您可以尝试以下一些修改：

1.调整关于内容容器样式：

.about-content-container {
  max-width: 100%; /* Adjust as needed */
}

2.调整关于拼贴网格样式：

.about-collage-grid {
  grid-template:
    "image-1 image-2"
    "image-3 image-3"; /* Change this line */
}

3.调整关于图像链接框样式：

.about-image-link-box {
  align-items: center; /* Change to center */
}

4.调整关于拼贴单元样式：

.about-collage-cell {
  display: block; /* Change to block */
}

5.调整关于拼贴图像样式：

.about-collage-image {
  object-fit: contain; /* Change to contain */
}

6.调整关于图像框样式：

.about-image-box {
  display: block; /* Change to block */
}

请将这些更改应用到您现有的 CSS 代码，看看它们是否有助于解决 Safari 16 中的重叠问题。请务必在发生问题的实际环境中测试更改。如果问题仍然存在，您可能还需要考虑联系 Webflow 支持或 Webflow 社区以获得进一步帮助，因为他们可能拥有特定于平台的怪癖和解决方案的经验。