Firefox 102中draggable元素:active状态拖拽后无法重置问题咨询

这是浏览器Bug吗？ #

是的，这属于Firefox旧版本（如你使用的102版本）的已知行为缺陷。当拖拽带有draggable="true"的元素时，浏览器未正确触发:active状态的重置逻辑，导致元素始终保持激活样式。后续更新的Firefox版本已经修复了这个问题，但在102这类旧版本中会存在该现象。

CSS层面的解决方案 #

提供两种可行方案，可根据需求选择：

方案1：自定义类配合JavaScript（兼容性更广） #

用自定义类替代:active伪类的功能，通过监听鼠标和拖拽事件手动切换类：

span.active {
    background: gold;
}

<span>span</span><br>
<span draggable="true">draggable span</span>

<script>
const spans = document.querySelectorAll('span');
spans.forEach(span => {
    span.addEventListener('mousedown', () => span.classList.add('active'));
    span.addEventListener('mouseup', () => span.classList.remove('active'));
    span.addEventListener('dragend', () => span.classList.remove('active'));
});
</script>

方案2：纯CSS Hack（仅适配Firefox） #

利用Firefox专属的-moz-drag-over伪类，结合:not()排除拖拽状态，避免:active样式残留：

span:active:not(:-moz-drag-over) {
    background: gold;
}

内容的提问来源于stack exchange，提问作者Friedrich -- Слава Україні