iOS 13上gap失效的那些坑

前两天在给项目做兼容性测试的时候，突然发现一个奇怪的问题：在iPhone XS上，用flex布局加了gap属性的元素间距完全失效。当时我的代码是这样的：

.optionGroups {
  display: flex;
  gap: 16px;
}

按理说两个按钮之间应该有16px的间距，但实际效果是挤在一起，像是gap被浏览器直接忽略了。最开始我还以为自己写错了，反复检查代码，结果发现连官方文档都说了“gap在iOS 13上支持有限”，这才意识到是兼容性问题。

为什么gap在iOS 13上会失效？

后来查资料才知道，iOS 13对gap的支持确实不咋地。虽然现在大多数现代浏览器都支持gap，但苹果家的Safari在2019年发布的iOS 13里，对gap的实现还处于“半成品”阶段。具体来说：

1. 部分flex布局下gap会被忽略：如果你用的是display: flex，但没设置flex-wrap: nowrap，iOS 13可能会直接跳过gap属性。
2. 子元素宽度溢出导致布局压缩：比如你的子元素设置了固定宽度（比如319px），加上gap后总宽度可能超过父容器，这时候iOS会强行压缩子元素，导致gap看起来消失了。

怎么解决？

折腾了一下午，最后用了个“土办法”：用margin代替gap。比如：

.optionGroups {
  display: flex;
}

.optionGroups .option {
  margin-right: 16px;
}

.optionGroups .option:last-child {
  margin-right: 0;
}

这样虽然多写了几行代码，但兼容性直接拉满。而且我发现，给父容器设置一个明确的最小宽度也很重要，比如：

.optionGroups {
  min-width: 700px; /* 根据你的子元素宽度计算 */
}

这样能防止子元素被压缩，避免布局错乱。

调试小技巧

1. 用Safari的开发者工具看样式：在iPhone上打开网页，用电脑的Safari连接设备，实时查看元素的计算样式，确认gap是否真的生效。
2. 打印元素的实际尺寸：有时候你以为子元素宽度是319px，但加上padding后实际占用的宽度可能更大，导致布局溢出。

经验总结

• gap虽好，但别全信：在需要兼容旧版iOS的项目里，还是老老实实用margin或者padding更稳妥。
• 布局前算好尺寸：尤其是flex布局下，子元素的总宽度+gap不能超过父容器，否则容易出现奇怪的压缩问题。
• 多设备测试：别只在电脑上测试，真机调试才能发现这些“隐藏的坑”。

现在回想起来，虽然折腾了一下午，但至少搞明白了gap在iOS 13上的限制，下次再遇到类似问题就能直接祭出margin大法了。兼容性这事儿啊，真是又爱又恨！