同一个页面在 Chrome 上排版正常，Safari 上按钮会往下掉一行。查了半天发现是某个 flex 属性的兼容差异，加一行兜底样式就好了。这种问题最耗时间，因为看不出是谁的锅。页面本身并不复杂：左侧是标题和说明文字，右侧是一组固定宽度的操作按钮，中间还允许内容根据窗口缩放。Chrome 会把文字压缩在一行，Safari 却在某些字体和系统缩放设置下重新计算了基线，结果按钮整体被挤到下一行。开发者工具里看起来每个元素的宽度都合理，只有把 outline 和实际计算样式同时打开，才能发现 flex item 的最小内容宽度没有被覆盖。最后加上的兜底样式并不漂亮，却避免了用户在 iPhone 上看到跳动的布局。这个案例让我觉得兼容性问题难排查，不只是浏览器不同，还和字体、缩放、语言以及内容长度组合有关。

内容来自用户上传，真假由发布者声明。