flex-direction: column实现的进度条在Safari中显示异常求助

嘿，我之前也踩过Safari Flex布局的坑，这大概率是Safari对Flex属性的兼容性处理和其他浏览器不一样导致的，给你几个具体的解决方向：

• 补全WebKit前缀：Safari（尤其是旧版本）对标准Flex属性的支持需要带-webkit-前缀，你需要给所有Flex相关的属性添加上对应的前缀，比如：

  .progress-tracker {
    display: -webkit-flex; /* Safari 旧版本需要 */
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    /* 其他布局属性也同理，比如 justify-content、align-items 都加上 -webkit- 前缀 */
  }
  

  如果是响应式断点切换到垂直布局，媒体查询里的flex-direction也要补前缀：

  @media (max-width: 768px) {
    .progress-tracker {
      -webkit-flex-direction: column;
      flex-direction: column;
    }
  }
  

• 明确子项的Flex属性值：Safari有时候对简写的flex: 1解析不够友好，建议把它拆成完整的属性值，确保子项能正确分配空间：

  .progress-step {
    -webkit-flex: 1 1 auto; /* 分别对应 flex-grow、flex-shrink、flex-basis */
    flex: 1 1 auto;
    /* 避免设置 width: 100% 这类会强制占满一行的属性，否则会导致垂直堆叠 */
  }
  

• 排查冲突样式：检查步骤项是否有display: block或者float这类会破坏Flex布局的属性，Flex子项的默认display是flex-item，不要手动改成block类属性。

• 针对旧版Safari的降级处理：如果需要兼容iOS 8及以下或者macOS 10.10以下的Safari，这类版本的Flex支持有很多bug，比如flex-direction: column的嵌套布局容易出问题，这时候可以考虑在这些版本里用inline-block或者其他布局方式做降级。

另外，你可以打开Safari的开发者工具，查看元素的计算样式，看看Flex相关属性是否被正确应用，有没有被其他样式覆盖，这也能帮你快速定位问题。

内容的提问来源于stack exchange，提问作者Chris