按钮hover位移卡顿或跳变的根本原因是使用margin-top或top触发重排，应改用transform: translatey()配合transition、整数位移值、backface-visibility: hidden及vertical-align调整来确保gpu加速和平滑渲染。
按钮 hover 位移卡顿或跳变？一定是用了 margin-top 或 top
直接写 margin-top: -2px 或 top: -2px 会导致浏览器重排（reflow），尤其在低端安卓机或 Safari 上动画掉帧、文字抖动。真正轻量的做法是用 transform: translateY(-2px)——它走合成层，GPU 加速，平滑可靠。
- 负值上移，正值下移：
translateY(-2px)是上移 2px，不是 -2px 就“往下” - 必须配
transition: transform 0.2s ease，且写在常态规则里（比如.btn），不能只写在:hover中 - 避免小数位移（如
translateY(-1.5px)），改用整数-2px或-3px，减少亚像素渲染模糊
文字发虚、图标错位？没加 backface-visibility 或没处理 baseline
Chrome/Safari 下 transform: translateY() 容易让文字边缘发虚，尤其搭配图标时图文错位，常见于 <i></i> 或 <svg></svg> 子元素设置了 vertical-align: middle 等干扰 baseline 的样式。
- 加
backface-visibility: hidden到按钮类上，强制启用硬件加速，多数情况可缓解模糊 - 检查图标子元素：删掉
vertical-align，或统一设为vertical-align: top避免 baseline 偏移 - 如果按钮含
.btn-icon类，确认其z-index不低于父容器，否则悬停时被遮挡
移动端点一下就卡住？:hover 在触屏上根本不可靠
iOS Safari 和多数安卓浏览器不支持持续 hover 状态，:hover 只在点击瞬间触发，松手后不自动恢复——这不是 bug，是规范行为。纯 CSS 无法解决。
- 真机测试必做：别只用 DevTools 的设备模拟器，连 iOS 真机验证
- 简单 fallback：加
button:active { transform: translateY(0); }模拟按下归位 - 要一致体验：用 JS 监听
touchstart/touchend切换is-hoveredclass，再配 CSS 规则 - 别混用
:hover和:active同时缩放+位移，否则触屏用户点一下就卡在抬升态
Bootstrap 默认样式权重高，自定义不生效？选择器没写对
Bootstrap 的 .btn.btn-primary:hover 权重远高于你写的 .my-btn:hover，样式根本不会应用。别用 !important 硬顶，后续和暗色模式、响应式断点容易冲突。
- 提升选择器优先级：写成
.btn.btn-primary.lift-up:hover这类复合类名 - 同步调整
box-shadow：默认阴影不动会显得“飘”，建议 hover 时加深为box-shadow: 0 4px 8px rgba(0,0,0,.1) - 如果项目用 Sass，更稳妥的方式是在自定义 SCSS 文件末尾加载，确保你的规则覆盖默认行为
