移动端按钮垂直对齐偏高，根本原因是父容器高度为0导致align-items: center失效，须设min-height（如48px）并清除line-height、vertical-align等干扰属性。
移动端按钮垂直对齐总偏高？先查 align-items 和容器高度
按钮在移动端看起来“浮在上面”，不是文字没居中，而是父容器没给够高度或 align-items: center 失效。Flex 容器里 align-items 控制的是交叉轴（垂直方向）对齐，但它只在容器有明确高度时才可视觉验证。
- 给按钮父容器加
min-height: 48px（推荐最小触控高度），别依赖内容撑开 - 确认没设
line-height或vertical-align—— 这俩在 flex 里无效，还可能干扰计算 - 用开发者工具检查容器 computed height 是否为 0；如果是，
align-items: center就只是“对齐到 0 高度的中点”，自然偏上 - 按钮本身别设
height+padding+line-height三件套，容易超限塌陷
小屏下按钮挤成一团或换行？flex-shrink: 0 比 white-space: nowrap 更关键
按钮在 iPhone 窄屏下缩成一条细线、文字重叠，或突然跳到第二行，根本原因是 Flex 默认允许子项收缩（flex-shrink: 1），而浏览器会无差别压缩所有按钮宽度，哪怕里面只有图标。
- 每个按钮加
flex-shrink: 0，彻底禁用弹性压缩 - 配合
min-width: 32px（纯图标）或min-width: 64px（图标+文字），守住底线尺寸 -
white-space: nowrap只防文字折行，不防按钮被压扁；它不能替代flex-shrink: 0 - 容器加
overflow-x: auto+-webkit-scrollbar: none，允许横向滚动但不显滚动条
触控点不准？padding 不够，min-width/min-height 才是硬指标
用户反复点击才触发，不是 JS 延迟，而是 CSS 触摸热区太小。iOS 和 Android 要求最小触控区域 ≥ 44×44px，仅靠 padding 在高 DPR 屏幕下会失真。
- 按钮必须设
min-width: 44px和min-height: 44px，这是硬性准入门槛 -
padding: 12px在 2x 屏上实际物理尺寸只有 24px，远低于 44px 标准 - 避免用
padding: 1em—— em 基于字体大小，而按钮字体常被系统缩放策略覆盖，不可控 - 加
touch-action: manipulation，减少 300ms 点击延迟，提升响应感
图标+文字按钮在 Safari 上模糊或下沉？width/height 必须写死像素值
SVG 图标在 iOS Safari 中模糊、字体图标下沉，问题出在尺寸未锁定。百分比、em、rem 在缩放或字体回退时会浮动，导致基线漂移和渲染模糊。
- SVG 图标必须设
width: 16px和height: 16px，不能只写width: 1em - 字体图标（如 Font Awesome）配
font-size: 14px+line-height: 1，防止继承父级行高产生上下留白 - 按钮内所有子元素统一
box-sizing: border-box，确保padding不溢出影响紧凑布局 - 图文混排用
display: flex; align-items: center; gap: 4px，比vertical-align更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
