IE8–10中:active不触发点击态的根源是其触发逻辑与现代浏览器不同，仅在鼠标按下且未移出时生效，且默认忽略按钮的:active样式，需重置outline和border行为。
IE8–10里:active不触发点击态的根源
不是写法错了，是IE对:active的触发逻辑和现代浏览器根本不同：它只在鼠标按下且未移出元素时生效，一旦鼠标移出就立刻失效；更关键的是，IE默认把<button></button>当作“表单控件”，会忽略开发者定义的:active样式，除非显式重置其outline和border行为。
给button加:active必须同时处理三件事
光写button:active { background: #ccc; }在IE下基本没用。要让它真正响应，得：
- 用
button::-moz-focus-inner { border: 0; }清除Firefox默认内边框（虽非IE问题，但常一并出现） - 在IE中强制启用
:active：给button加outline: none;，否则焦点态会覆盖点击态 - 避免用
background-image做点击反馈——IE8–9对:active下的背景图切换支持极差，优先用纯色或box-shadow
onclick + class切换比纯CSS:active更可靠
当按钮需要明确的“按下→弹起”视觉反馈（比如提交按钮防重复点击），CSS伪类在IE里不可信。此时应放弃:active，改用JS控制class：
button.addEventListener('mousedown', function() {
this.classList.add('is-pressed');
});
button.addEventListener('mouseup blur', function() {
this.classList.remove('is-pressed');
});对应CSS写成button.is-pressed { background: #999; transform: translateY(1px); }。这样既绕过IE的:active缺陷，又兼容所有版本（包括IE7用className替代classList）。
立即学习“前端免费学习笔记（深入）”；
移动端Safari和IE混用时的双重陷阱
如果页面同时要适配老IE和iOS Safari，别用:active模拟点击反馈——Safari默认禁用:active（为提升滚动性能），需手动开启：* { -webkit-tap-highlight-color: transparent; }，再配合body { cursor: pointer; }激活:active。但这个操作会让IE的:active更不稳定。所以真实项目里，只要涉及跨端一致反馈，直接上JS方案最省心。
IE下:active从来不是“加个前缀就能好”的问题，而是触发机制、渲染优先级、表单控件默认样式的叠加失效。越想靠CSS硬扛，越容易在测试阶段发现按钮点着没反应——这时候别调样式，先查outline和事件绑定是否被覆盖。
