按钮点击跳动的根本原因是:active下border或padding变化引发重排；应统一border-width（如2px solid transparent），同步处理:focus-visible等状态，并注意vertical-align对齐。
按钮点击时尺寸跳动的根本原因
本质是 :active 状态下边框（border）或内边距（padding）发生了变化，导致盒模型重排。浏览器默认给 button 的 :active 加了 border: 2px outset 或类似样式，一旦你没显式重置，点击瞬间就会“缩一下”或“弹一下”。
用 transparent 边框预占空间的实操要点
核心不是“加透明边框”，而是让常态和激活态的 border-width 一致，且不改变视觉表现：
-
border必须声明宽度（如2px），否则transparent不起作用——border: none和border: 2px solid transparent在盒模型中完全不是一回事 - 推荐写法：
border: 2px solid transparent，而不是border-color: transparent（后者依赖已有border-width，容易漏） - 如果按钮本身有背景色或阴影，
transparent边框不会遮挡，但要注意高对比度模式下可能意外暴露（极少数情况） - 别只写
:active，记得同步处理:focus-visible和:focus-within，否则键盘操作时仍会跳
更稳妥的替代方案：outline + box-sizing
当边框语义不强（比如纯文字按钮、图标按钮），直接砍掉边框交互更干净：
- 用
outline: none干掉默认焦点环，再用box-shadow模拟聚焦效果，完全绕过边框变更 - 确保
box-sizing: border-box已全局继承，否则padding动态增减也会引发跳动 - 慎用
appearance: none：它会清掉所有 UA 样式（包括button的默认padding和line-height），需手动补全，否则在 Safari 上反而更不稳定
移动端 click 延迟与伪类触发时机差异
在 iOS Safari 中，:active 可能延迟触发或不触发，单纯靠 CSS 无法覆盖所有场景：
立即学习“前端免费学习笔记（深入）”；
- 真机测试时发现点击无反馈？优先检查是否启用了
touch-action: manipulation，否则:active可能被压制 - 如果 JS 里监听了
click并立刻修改 class，CSS:active和 class 切换存在竞态——此时应统一用 class 控制状态，禁用:active - 安卓 WebView 对
transparent边框兼容性良好，但老版 UC 浏览器会把transparent渲染成黑色，建议加border-color: rgba(0,0,0,0)回退
border 写在组件级样式里，却忘了重置所有子元素（比如 span、svg）的 vertical-align ——它们默认是 baseline，哪怕边框稳住了，内部对齐偏移照样造成视觉跳动。 
