现代浏览器基本支持cursor: grab/grabbing，但safari 15.4及更早版本完全不支持，firefox 68前需-moz-grab，chrome/edge 49–56需-webkit-grab。
Chrome/Firefox/Safari 对 grab 的支持差异到底有多大
现代浏览器其实都支持 cursor: grab 和 cursor: grabbing，但 Safari 15.4 之前（含 iOS 15.4）完全不认这两个值，只当无效声明；Firefox 从 68 开始原生支持，但早期版本需 -moz-grab；Chrome/Edge 从 57 起支持标准值，但 49–56 需 -webkit-grab。现在（2026 年）真正需要前缀的只剩老版 Firefox（
要不要加 -webkit-grab 和 -moz-grab
加前缀不是“为了兼容”，而是防止旧环境静默失效——因为 cursor 声明一旦某个值无效，整条规则会被忽略（不像 flex 那样降级）。所以必须保证 fallback 有效，且顺序正确：
-
cursor: -webkit-grab;和cursor: -moz-grab;必须写在标准值cursor: grab;之前，否则被覆盖 - 每个声明都得单独写，不能合并成一条（CSS 不支持多值 fallback 写法）
- 别指望用 Autoprefixer 自动补全——它默认不处理
grab，需手动配置插件或加注释
正确写法示例：
button.draggable {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
:active 状态下用 grabbing 还要加前缀吗
要。Safari 15.4 之前同样不支持 grabbing，且 -webkit-grabbing 和 -moz-grabbing 是真实存在的私有值（虽文档稀少，但实测有效）。注意两点：
-
grabbing在拖动开始后由浏览器自动触发，但 :active 是用户按住鼠标时的瞬间状态，二者时间窗口不同，建议同时覆盖 - 别把
grabbing当作 JS 动态切换的唯一依据——有些安卓 WebView 拖动中会强制回退到default，得靠user-select: none+ class 切换兜底
推荐写法：
.draggable:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
为什么加了前缀还是没效果
常见原因不是语法错，而是触发条件没满足：
- 元素没设
draggable="true"属性，部分旧 WebView 下grab样式仅对原生可拖元素生效 - CSS 优先级被其他规则覆盖（比如某父级写了
cursor: default !important），建议用!important显式提升（尤其在第三方 UI 库里） - 移动端 Safari 完全忽略所有自定义
cursor（包括grab），只响应pointer和text；iOS 上真想提示可拖，得靠视觉反馈（如拖拽图标、微动效）代替
最隐蔽的坑：Chrome 115+ 在某些 iframe 场景下，grab 会在 dragstart 后瞬间闪回 default，必须配合 event.dataTransfer.effectAllowed = "move" 才能稳住样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
