用 transform: translateY(-4px) 实现 hover 上浮更可靠，不触发重排、动画顺滑且默认支持 transition；需配 transition: transform 0.2s ease，禁用 transition: all，注意单位、兼容性和像素对齐。
hover 时用 transform: translateY 实现上浮
直接用 transform: translateY(-4px) 比改 margin-top 或 top 更可靠，它不触发重排，动画顺滑，且默认支持 transition 过渡。
常见错误是写成 top: -4px 却忘了给元素加 position: relative，结果没反应；或者用 margin-top 导致父容器高度跳动、相邻元素位移。
- 必须搭配
transition才有“平滑”效果，比如transition: transform 0.2s ease - 别在伪类里漏写单位（
translateY(-4)❌，必须是translateY(-4px)✅） - 如果文字本身行高紧、字形偏下，上浮量建议从
-2px起调，避免悬停时突然切出视野
为什么不能只靠 transition-property: all
transition: all 0.2s 看似省事，但实际会监听所有可动画属性——包括 color、opacity、甚至你没动过的 box-shadow。一旦后续加了其他 hover 样式（比如改颜色），动画节奏就容易打架，文字上浮变拖沓或卡顿。
- 明确写
transition: transform 0.2s ease，只交由 GPU 加速的 transform 动画负责 -
ease比linear更自然，开头缓、中间快、结尾再缓，符合“上浮又回落”的物理感 - 如果项目要兼容老版本 Safari，补一句
-webkit-transform: translateY(-4px)，但现代项目基本不用
文字上浮后出现模糊或锯齿怎么办
这是 Chrome 和 Safari 在 subpixel 渲染 + transform 缩放/位移组合下的经典问题：元素没对齐像素网格，GPU 合成时做了插值，导致发虚。
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: transform提前告知浏览器该元素要动，有助于优化合成层 - 更稳妥的是让位移值为整数像素（
translateY(-4px)✅，translateY(-4.2px)❌） - 如果上浮量很小（如
-1px），部分字体渲染引擎可能干脆不触发重绘，看起来像没动——这时宁可加到-2px并微调font-size或line-height来平衡视觉重量
按钮内文字上浮 vs 纯文本链接上浮的区别
按钮通常有背景、边框、内边距，上浮时整个块一起动更合理；而纯文本链接（a）若设 display: inline，transform 仍有效，但要注意行内元素的基线对齐可能让上浮看起来“偏高”。
- 按钮推荐对
button或包裹文字的span应用 transform - 链接建议包一层
span再加 hover，避免直接作用于a导致下划线错位 - 如果用了
vertical-align: middle，上浮后可能和旁边图标不对齐，此时优先统一用 flex 布局控制垂直居中，而非依赖 vertical-align
