低版本浏览器中button设display: flex无效，因其是受限弹性容器；应改用内层span/div包裹并设flex，同时显式声明box-sizing: border-box、min-width: 0（iOS需1px）及flex: 1 0 0。
button 元素直接设 display: flex 在低版本浏览器中不生效
Chrome 48 之前、Safari 9 之前、Android 4.4 WebView、iOS 8.4 等环境里，<button></button> 是“受限弹性容器”——即使写了 display: flex，align-items 和 justify-content 也大概率被忽略。这不是你写错了，是浏览器对表单控件的硬编码限制。
真实错误现象包括：按钮内图标和文字垂直错位、文字贴顶或贴底、text-align: center 失效、父级 justify-content: center 完全没反应。
- 不要在
<button></button>上直接写display: flex，哪怕 autoprefixer 已补全前缀 - 改用包裹法：把内容放进
<span></span>或<div>，再给这个内层元素设 <code>display: flex - 同时清除
<button></button>自身的padding和默认border，避免内层 flex 容器被挤压变形
.btn {
display: inline-block;
padding: 0;
border: none;
background: none;
}
.btn > span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1em 2em;
}
box-sizing: border-box 必须显式设置，否则 button 宽度计算混乱
<button></button> 在各浏览器中默认 box-sizing 不一致：Chrome / Firefox 默认 content-box，但 Safari（尤其 iOS 15+）会悄悄按 border-box 解析其内边距；而某些 Android WebView 则完全忽略 box-sizing 声明。结果就是同一段 CSS，在不同设备上按钮实际宽度偏差可达 12px 以上。
- 必须为所有
<button></button>显式声明box-sizing: border-box，不能依赖全局重置 - 如果按钮还用了
flex: 1 0 0等弹性分配，box-sizing错误会导致min-width干预失效，进而触发 Safari 的隐式min-width: min-content保护逻辑 - 配合
min-width: 0使用，才能让flex: 1 0 0真正从零开始均分空间
button {
box-sizing: border-box;
min-width: 0;
}
flex: 1 0 0 + min-width: 0 才能真正等宽，仅 flex: 1 不够
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，但它在 <button></button> 上常被浏览器的最小宽度策略覆盖。尤其当按钮含文字或图标时，flex-basis: 0 会被忽略，退回到内容宽度，导致“长文字按钮宽、短文字按钮窄”。
立即学习“前端免费学习笔记（深入）”；
- 写全
flex: 1 0 0，明确禁用收缩（flex-shrink: 0），防止 Chrome 对 button 的隐式压缩 - 强制加
min-width: 0，覆盖浏览器对<button></button>的min-width: min-content默认值 - 移动端 Safari 需要更激进：用
min-width: 1px替代0，绕过其 viewport 缩放下的宽度重算 bug
button {
flex: 1 0 0;
min-width: 1px; /* iOS 15+ Safari 必须 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
text-align: center 在 flex: 1 0 0 下失效，要用 flex 居中接管
当 flex-basis: 0 生效后，<button></button> 的盒模型失去内容参考尺寸，text-align 失去对齐基点，文字会偏左或溢出。这不是样式没加载，是 CSS 盒模型层面的逻辑中断。
- 别在
<button></button>上设text-align，它此时已无意义 - 改用
display: flex; align-items: center; justify-content: center—— 但必须作用在内层容器（如<span></span>），而非<button></button>本身 - 如果按钮含 SVG，确保 SVG 有
vertical-align: top或统一用height: 1em+flex对齐，避免 baseline 混乱
最易被忽略的一点：上述所有规则在小程序环境中仍需额外处理——微信小程序的 button 组件自带 margin-left: auto; margin-right: auto，必须显式重置为 margin: 0，否则 justify-content 永远不会生效。
