在CSS3中如何处理Flex布局在iOS Safari下的常见渲染兼容Bug？-css教程-PHP中文网

ios safari 12.2前需加-webkit前缀实现flex兼容，子项flex属性须显式声明-webkit-flex和-ms-flex并覆盖flex-basis，space-around需设容器宽度或改用space-between，fixed底部栏应替换为flex布局子项。

在css3中如何处理flex布局在ios safari下的常见渲染兼容bug？

flex容器display属性必须加-webkit前缀

iOS Safari 12.2 之前（含大部分 iOS 12 及更早系统）对 display: flex 的原生支持不完整，会直接忽略该声明，导致子元素退回文档流布局。这不是“偶尔失效”，而是整条规则被跳过。

必须显式写全兼容链，顺序不能错：

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

-webkit-box 覆盖 iOS 6–7 和 Android 4.1–4.3
-webkit-flex 覆盖 Safari 6.1–9、iOS 7–9
-ms-flexbox 覆盖 IE10
display: flex 放最后，作为现代标准兜底

flex子项的flex属性在Safari中会被错误解析为1 1 100%

Angular Material 或手写响应式类（如 .flex-lg-20）常设 flex: 0 0 20%，但 Safari（尤其 iOS 11–13）会把未声明的 flex-basis 默认为 auto，再结合其对 max-width 的忽略逻辑，最终计算出 flex-basis: 100%，让所有子项独占一行。

解决方式不是改 flex 值，而是强制覆盖 flex-basis：

@media (min-width: 1280px) and (max-width: 1919px) {
  .layout-row > .flex-lg-20 {
    -webkit-flex: 1 1 20%;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
  }
}

必须带 -webkit-flex 和 -ms-flex，仅 flex 不生效
不要用 flex: 20% 这种简写——Safari 会误读为 flex: 1 1 20% 但实际按旧语法处理
如果子项含图片，额外加 min-width: 0 防止 Safari 因 shrink 行为撑破容器

justify-content: space-around 在Safari中塌缩或溢出

当父容器没有明确 width/height、子项含图标+文字时，space-around 在 Safari 中可能表现为间距归零、文字重叠，或最后一项被挤出视口右侧——这是 Safari 对“可用空间”计算不一致导致的。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

稳妥替代方案：

改用 justify-content: space-between，并确保子项数量可被整除（如 4 项配 3 个间隙）
或放弃自动分配，显式设 margin-inline：.item:not(:first-child) { margin-inline-start: 16px; }
若必须用 space-around，给容器加 width: 100% 或 inline-size: 100%，提供明确参考基准