button:active 无反应主因是未触发重绘或被父容器裁切，需设 position: relative、禁用 overflow: hidden 并添加 transition；移动端需用原生 button 或 role="button" + tabindex，配合 viewport 设置或 touch 事件模拟。
button:active 为什么按下去没反应
直接写 button:active { transform: translateY(2px); } 大概率无效——因为浏览器默认会给 button 加上 user-select: none 和焦点管理逻辑，但更常见的原因是：没有给按钮设置 position: relative 或 transform 触发层叠上下文/重绘机制，导致位移视觉不明显；或者按钮父容器有 overflow: hidden 把下移部分裁掉了。
实操建议：
- 确保按钮本身有
position: relative（transform位移在 static 容器中有时会“飘”） - 避免父级加
overflow: hidden，尤其带圆角的容器容易意外裁切 - 用
transform: translateY(1px)比top: 1px更稳妥，不会触发重排 - 务必加上
transition: transform 0.1s ease，否则位移突兀且易被忽略
:active 伪类在移动端点不灵怎么办
移动端 Safari 和 Chrome 对 :active 的触发非常保守：默认只有「可点击元素」才响应，而普通 <div> 或没加 <code>role="button" 的标签基本不触发；更关键的是，iOS Safari 在非 <a></a> 和 <button></button> 元素上会延迟约 300ms 才激活 :active，甚至直接跳过。
实操建议：
- 只对原生
<button></button>或带tabindex="0"+role="button"的元素用:active - 在
中加<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">，禁用双击缩放可恢复:active响应 - 更可靠的方式是监听
touchstart/touchend切换 class，比如is-pressed，再用 CSS 控制样式
按压感不只是位移：别漏掉配套变化
单靠 transform: translateY() 只能模拟“下沉”，但真实按钮按压还伴随阴影收缩、背景加深、边框微调等细节。缺了这些，用户会觉得“动了但不像真按下去”。
实操建议：
- 配合
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)模拟内凹高光 - 把
background-color调深 10%～15%，比如从#007bff变成#0069d9 - 如果用了
border，可让border-bottom-width加 1px，强化“压进去了”的错觉 - 所有变化必须共用同一组
transition，否则节奏不一致会显得卡顿
兼容性与性能注意点
:active 本身兼容性极好（IE8+），但 transform 在旧版 Android WebView 或 QQ 浏览器里可能不支持 translateY 单独使用；另外，高频触发 :active（比如快速连点）时，若过渡时间太长（>0.2s），会造成状态滞留，用户松手后按钮还“卡在按下态”。
实操建议：
- 降级方案：用
top+position: relative替代transform，虽然触发重排但兼容性更好 - 过渡时间控制在
0.08s–0.12s之间，短于 0.08s 不易察觉，长于 0.15s 就有粘滞感 - 避免在
:active中改height或font-size，这会引发布局抖动，尤其在低端安卓机上明显
按压感的本质不是“动多少”，而是“动得像被压进去”。位移只是最表层的信号，阴影、颜色、边框、过渡节奏要同步配合；而移动端的失效，往往不是写法错，是缺了 viewport 控制或用了不该用的标签。
