为什么CSS cursor: grab抓取手型在某些浏览器不显示_添加vendor前缀支持-css教程-PHP中文网

ie和旧版safari不支持无前缀cursor: grab，必须添加-ms-grab、-webkit-grab、-moz-grab等私有前缀，且顺序需为-ms-优先；:active状态下的grabbing同理需对应前缀，否则拖拽起始时指针无法切换。

为什么css cursor: grab抓取手型在某些浏览器不显示_添加vendor前缀支持

直接原因：IE 和旧版 Safari 不认识 cursor: grab 这个值，必须加对应前缀才能生效。这不是 bug，是标准落地过程中的兼容性断层——grab 和 grabbing 直到 CSS Basic User Interface Module Level 4 才被正式纳入，而 IE 11、Safari ≤ 12.1 等浏览器只实现了早期草案里的私有版本。

IE 10–11 必须用 `-ms-grab`，不是可选而是刚需

IE 完全忽略无前缀的 grab 和 grabbing。即使你写了 cursor: grab，它也会跳过，继续尝试下一个声明（如果有的话）。所以必须显式写出 -ms-grab 和 -ms-grabbing：

button.draggable {
  cursor: -ms-grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
button.draggable:active {
  cursor: -ms-grabbing;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

顺序不能乱：IE 从左到右匹配，-ms- 必须放在最前面，否则它看到后面的 grab 就停了，根本不读后续
别省略 :active 状态下的前缀——-ms-grabbing 同样不被原生支持，漏掉会导致拖拽开始时指针卡在 grab 上不动
注意：IE 不支持 cursor: url() 配合 grab 混用，会直接失效；只用纯关键字前缀最稳

Safari ≤ 12.1 需要 `-webkit-grab`，且不能依赖 `:active` 自动切换

旧版 Safari 虽然认 -webkit-grab，但对 :active 的触发很保守——尤其是当元素没设 tabindex 或不是原生可聚焦元素时，:active 可能压根不触发，导致 grabbing 样式永远不会出现。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

稳妥做法是用 JS 在 dragstart 事件里手动加类：element.classList.add('is-dragging')，再配 CSS：.is-dragging { cursor: -webkit-grabbing !important; }
别指望 cursor: -webkit-grab 在 <svg></svg> 内部元素上生效——Safari 对 SVG 子元素的 cursor 绑定极弱，得把样式提到外层 <div> 或改用内联 <code>style="cursor: -webkit-grab;"
macOS Safari 有时会把 -webkit-grabbing 渲染成旋转动画，这是已知行为，不是错误，但若影响体验，可用 cursor: move 降级替代