CSS如何解决IE下按钮点击反馈缺失_使用active伪类前缀处理

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-shadowonclick class切换比纯CSS:active更可靠当按钮需要明确的“按下→弹起”视觉反馈比如提交按钮防重复点击CSS伪类在IE里不可信。此时应放弃:active改用JS控制classbutton.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。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能