按钮高度不能只靠height: auto，因其在inline或inline-flex场景下不生效；真正起作用的是line-height、padding与box-sizing: border-box组合，配合min-height和flex父容器的align-items: flex-start才能实现可靠自适应。
按钮高度为什么不能只靠 height: auto？
移动端按钮高度“看起来自适应”，但实际常卡死在某个固定值，根本原因是 height: auto 在 flex 或 inline-block 场景下不生效——它只对块级元素在内容撑开时起作用，而按钮默认是 inline 或 inline-flex，内部行高、字体、padding 共同决定最终高度，auto 不会重新计算。
常见错误是写 button { height: auto; } 后发现高度没变，或文字换行后按钮被裁切。这不是 bug，是 CSS 渲染规则：按钮的“行盒高度”由 line-height 和 font-size 主导，padding 只是叠加，height 属性反而会破坏这个自然计算。
- 真正起作用的是
line-height：设为1.5或2rem，比直接设height更可靠 -
padding必须配合box-sizing: border-box，否则 padding 会额外加高 - 避免同时设
height和line-height，冲突时浏览器优先按height截断内容 - 多行文本按钮必须用
display: block或flex，否则line-height不作用于换行
如何让按钮随文字行数自动撑高？
按钮内文字换行（比如中英文混排、长词折行）时，高度必须响应变化，但 height: auto 仍不可靠——尤其在 iOS Safari 中，按钮容器可能不重绘，导致底部被截。
最稳方案是放弃控制 height，改用 min-height + padding + line-height 组合，并确保父容器不设固定高：
立即学习“前端免费学习笔记（深入）”；
- 按钮设
min-height: 44px（满足移动端最小点击区域） -
padding: 12px 16px，配合box-sizing: border-box -
line-height: 1.4，不写绝对值（如24px），避免与 font-size 冲突 - 文字容器用
word-break: break-word或overflow-wrap: break-word强制折行 - 禁用
white-space: nowrap（这是导致高度不撑开的最常见原因）
Flex 布局下按钮高度不一致怎么办？
当多个按钮放在 display: flex 容器里，哪怕文字行数不同，它们也常被拉成等高——这是 align-items: stretch 的默认行为，不是你想要的“自适应”。
要让每个按钮按自身内容高度独立伸缩，关键不是改按钮，而是改父容器：
- 父容器加
align-items: flex-start，解除纵向拉伸 - 若需底部对齐，改用
align-items: flex-end或单个按钮加margin-top: auto - 避免给按钮设
flex: 1或flex-grow: 1，这会强制等高 - iOS Safari 对
flex-basis: auto支持不稳定，建议显式写flex-basis: content（仅部分新版本支持），更兼容写法是去掉所有 flex 相关 height 控制，回归 padding + line-height
字体和行高不一致导致高度偏差
同一段文字，在不同系统/浏览器里渲染高度不同：iOS 的 SF Pro 字体行高比 Android Roboto 小，微信内置浏览器又可能忽略 line-height 设置。这时候 JS 测量 offsetHeight 没用，因为按钮还没重排。
解决思路不是“适配”，而是“统一渲染前提”：
- CSS 中显式声明
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif，减少字体 fallback 差异 -
line-height用无单位数值（如1.4），而非px或em，避免继承放大 - 测试时关闭浏览器默认样式：
* { margin: 0; padding: 0; border: 0; }，再加 reset - 真机调试时注意：Safari 开发者工具显示的 computed height ≠ 实际渲染高度，务必在真机上验证
最易被忽略的点：按钮高度问题往往不是按钮本身写的不对，而是父容器设置了 height、max-height 或 overflow: hidden，把按钮内容直接剪掉了。检查 computed 样式里的 height 和 overflow，比调按钮更优先。
