自定义光标需严格遵循跨浏览器兼容规范：必须提供 fallback 关键词（如 pointer）、避免 file:// 协议、png 需 rgba 格式且 ≤32×32px、ie/safari 优先用 .cur 文件，三者叠加是主要卡点。
有，而且差异不小——不是“偶尔不显示”，而是同一段 cursor: url() 在 Chrome、Firefox、Safari、IE 上可能分别表现为：完全生效、灰块、忽略整条声明、直接报错或彻底不加载。
fallback 缺失会让整条 cursor 声明被浏览器静默丢弃
Chrome 和 Firefox 不会把 cursor: url("arrow.png") 当作“加载失败就回退到默认箭头”，而是直接跳过这条规则——结果就是光标看起来“没变”，控制台也不报错，极难排查。
- 必须写成
cursor: url("arrow.png"), pointer;或cursor: url("arrow.png"), auto;，逗号后至少跟一个标准关键词 -
pointer、default、auto、not-allowed都可作 fallback；none也合法，但慎用（真隐藏光标会影响可访问性） - 漏掉逗号、多加空格、用中文逗号，都会导致整条声明失效
.png 自定义光标在 Firefox 中特别脆弱
Firefox 对 PNG 光标的格式和尺寸极其敏感，稍有偏差就渲染成灰色方块或直接不显示。
- PNG 必须是 RGBA 格式（带完整 Alpha 通道），不能是索引色或 24-bit RGB
- 推荐尺寸 ≤32×32px；64×64px 在部分版本勉强可用，128×128 基本会被截断或崩坏
- 导出时关闭“压缩调色板”“嵌入 ICC 配置文件”等干扰项（Photoshop / Figma 导出设置里要手动关）
- SVG 光标在 Safari 和 iOS 上基本不可用，Chrome 支持有限，不建议作为主力格式
本地双击打开 HTML 时，Chrome/Edge 会拦截 url() 加载
用 file:// 协议打开页面时，url("cursor.png") 会触发 Not allowed to load local resource 错误——这不是你代码写错了，是浏览器安全策略强制阻止。
- 路径必须相对于 CSS 文件位置，不是 HTML 文件位置
- 开发阶段必须起 HTTP 服务：比如
npx serve、python3 -m http.server，或 VS Code 的 Live Server 插件 - 双击打开 index.html 永远卡在这一步，别试
IE 和旧版 Safari 要靠 .cur 文件兜底
IE 全系列不支持 PNG 光标，Safari 对 PNG 支持不稳定，只认 .cur 最稳。
- 优先提供
.cur文件，用专业工具（如 RealWorld Cursor Editor）生成，确保含热点坐标（hotspot） - 多格式 fallback 写法：
cursor: url("arrow.cur"), url("arrow.png"), pointer; - IE9+ 可能拒绝带参数的 URL（如
url("arrow.cur?ver=1")），路径保持干净 - 移动端（iOS/Android）所有主流浏览器都忽略
url()，写了等于白写
真正卡住人的从来不是语法，而是 fallback 缺失 + 本地 file:// 调试 + Firefox 对 PNG 的隐性限制这三者叠加。先补上 pointer，再起服务跑，最后换 .cur 或压到 32×32 的 RGBA-PNG——基本就能过了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
