ios safari中button宽度不一致的根本原因是其强制施加min-width: min-content且忽略min-width: 0，需用min-width: 1px替代，并配合flex: 1 0 0和box-sizing: border-box确保等宽。
为什么iOS Safari里button宽度忽大忽小
根本原因是 iOS Safari（尤其 15+）对 button 元素施加了隐式 min-width: min-content，且不响应你写的 flex-basis: 0 —— 它优先按文字内容撑开，再考虑 flex 分配，导致“提交”和“导出全部”按钮宽度差异极大。
这不是 flex 失效，而是浏览器在“保护”按钮可点击性，但保护过头了。Chrome/Firefox 虽也设了 min-width: min-content，但允许被 min-width: 0 显式覆盖；iOS Safari 却会悄悄忽略它，或在某些渲染路径下重置为内容宽度。
- 临时加
border: 1px solid red查看 computed 样式，确认min-width是否真被设为0 - 若 computed 中仍显示
min-content或具体像素值，说明样式被覆盖或未生效 - 别信
min-width: auto或min-width: fit-content，iOS 下行为不可靠
必须加 min-width: 0，但 iOS 需要 1px 替代方案
min-width: 0 是让 flex: 1 0 0 生效的前提，但在 iOS Safari 中常被忽略。实测稳定解法是降级为 min-width: 1px —— 它足够小到不影响视觉等宽，又能绕过 Safari 的“最小宽度保护机制”。
- 所有参与 flex 分配的
<button></button>都要加：min-width: 1px - 搭配
flex: 1 0 0（即flex-grow: 1,flex-shrink: 0,flex-basis: 0） - 不要只给部分按钮加，漏掉任意一个，整行都会因基准不一致而错位
- 若用 Vue/React 组件封装按钮，确保该组件根元素也继承此样式
box-sizing: border-box 必须作用于每个子项
Flex 子项默认是 content-box，但 iOS Safari 对 padding/border 的解析更敏感。如果你设了 padding: 8px 却没设 box-sizing，那 flex-basis: 0 算出来的“零宽”实际还要加上内边距，结果就是按钮总宽比预期多出 16px。
- 全局重置最省心：
* { box-sizing: border-box; }，包括伪元素 - 若担心影响第三方库，至少确保每个 flex 直接子元素有
box-sizing: border-box - 特别注意：表单控件（
input、select）和图片在 flex 中也需同样处理
避免 white-space: nowrap 加剧不均
有人想防按钮文字换行，加了 white-space: nowrap，结果宽度更不一致——因为禁用换行后，长文本强行撑开，而短文本仍被压缩，flex 分配起点彻底失衡。
- 真需要防换行，优先用
text-overflow: ellipsis+overflow: hidden+width控制（但注意 width 在 flex 中优先级低于 flex-basis） - 更稳妥的是保留换行，用
line-height和padding控制垂直居中，视觉上更统一 - 如果父容器宽度本身不稳定（如 modal 内容区随内容伸缩），先固定父容器宽度，再做 flex 分配
实际宽度偏差往往不是单一属性问题，而是 min-width、box-sizing、flex-basis 三者在 iOS 渲染引擎里叠加失效的结果。少改一个，就可能回到“看着写了 flex:1，结果还是参差不齐”的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
