按钮文字点击抖动的直接原因是默认outline重绘与transform/border变化触发重排或亚像素渲染偏移，尤其在inline-flex、rem/em字体及缩放容器中更明显。
Flex容器中按钮文字点击抖动的直接原因
这不是浏览器 bug，而是按钮默认 outline 重绘 + transform 或 border 变化触发的重排（reflow）或亚像素渲染偏移。尤其当按钮内部用 inline-flex 或设置了 font-size 为 rem/em、且父容器存在缩放/视口单位时，抖动更明显。
常见触发场景与对应修复
抖动不是随机发生，基本集中在以下三类操作后：
- 点击瞬间出现 outline 轮廓（尤其是 Chrome/Firefox 默认 focus outline）
- 按钮 hover 或 active 状态里写了
transform: scale(0.98)或border: 1px solid→ 尺寸微变导致文本重绘错位 - 父 Flex 容器用了
align-items: center但按钮未设vertical-align: middle（仅对 inline 元素生效）或未约束行高，造成基线浮动
修复建议：
- 统一禁用默认 outline：
button:focus { outline: none; }，改用box-shadow模拟焦点态（更可控） - 避免在
:active中修改 border-width 或 transform-scale；如需压感反馈，用background-color或opacity更安全 - 给按钮加
line-height: 1.2和vertical-align: top（若为 inline-flex 容器则用align-items: center即可，无需额外 vertical-align）
容易被忽略的字体渲染细节
抖动在 macOS Safari 和 Windows Chrome 高 DPI 屏上更易复现，根源是字体亚像素抗锯齿在尺寸突变时重计算。关键点：
立即学习“前端免费学习笔记（深入）”；
-
font-smoothing: antialiased在 active 状态下可能临时关闭，造成文字“跳帧” - 使用系统字体栈（如
-apple-system, BlinkMacSystemFont, "Segoe UI"）比自定义 webfont 更稳定 - 若按钮内含 SVG 图标，确保其
width/height是整数，避免小数像素导致布局抖动
验证与快速定位方法
别靠肉眼猜——打开 DevTools 的 Rendering 面板，勾选 “Paint flashing” 和 “Layout Shift Regions”。点击按钮时如果看到文字区域闪红，说明发生了重绘；如果整个按钮框闪烁，则是 layout shift。
更准的判断方式是检查 computed styles：
- 点开按钮元素 → Computed → 搜索
outline，确认是否在:focus下突然出现 - 搜索
transform和border，对比:normal与:active的值是否变化 - 看
line-height和font-size是否因父级 flex-basis 计算产生小数（比如16.333px）
真正难搞的抖动，往往藏在 flex-basis 自动计算和字体度量对齐的夹缝里——它不报错，但每次点击都像轻轻晃了一下。盯住 computed 值里的小数点，比调样式更管用。
