应为各浏览器添加对应前缀并声明标准属性：-webkit-user-select、-moz-user-select、-ms-user-select 和 user-select，确保兼容 Safari 15.4 前、Firefox 69 前及旧版 Chrome/Edge。
Chrome/Firefox/Safari中user-select行为不一致怎么办
现代浏览器对user-select的支持已基本统一，但 Safari 15.4 之前、Firefox 69 之前、旧版 Chrome（user-select: none在老版本 Safari 可能完全失效。
实操建议：
- 始终叠加私有属性：
-webkit-user-select（Chrome/Safari）、-moz-user-select（Firefox）、-ms-user-select（IE/Edge Legacy），顺序建议按此排列，避免被覆盖 - 注意 Safari 对
input、textarea等可编辑元素会忽略user-select: none，必须配合pointer-events: none或 JS 拦截selectstart事件 - Firefox 在
contenteditable="true"容器里对user-select: none支持不稳定，建议改用user-select: text显式启用，再用 JS 控制选区
user-select: none在移动端 Safari 失效的典型场景
iOS Safari（尤其是 iOS 15–16）对user-select: none有额外限制：当元素有touchstart监听器、或父级设置了cursor: pointer，它可能被绕过；长按仍可能触发文本选择浮层。
实操建议：
- 在目标元素上加
-webkit-touch-callout: none，抑制长按呼出菜单 - 若需彻底禁用，配合
ontouchstart="event.preventDefault()"（注意影响滚动），或监听selectstart并event.preventDefault() - 避免在
user-select: none元素内嵌套span等未重置样式的子元素——子元素可能继承user-select: text，导致局部可选
IE10/11 和 Edge Legacy 的-ms-user-select特殊处理
IE10+ 和旧版 Edge 使用-ms-user-select，但它不支持all和contain值，只认none、text、element；且在display: flex容器内，若子项未显式设-ms-user-select，可能继承父级none导致误禁。
实操建议：
- 对需要可选文本的子元素（如按钮里的文字），必须单独声明
-ms-user-select: text，不能依赖继承 - 避免在 IE 中混用
user-select: none和-ms-user-select: text——后者优先级更高，但若写反顺序（标准属性在前），IE 会忽略整条规则 - 测试时用 IE11 的“仿真模式”不够准，务必真机或 BrowserStack 上验证长按/双击选择行为
用 PostCSS 自动补全私有前缀是否可靠
PostCSS 的 autoprefixer 默认支持user-select，但仅覆盖到「主流浏览器最后 2 个版本」，不会为 iOS Safari 14 或 Android UC 浏览器等加前缀；而且它不处理user-select: all这种较新值（Safari 15.4+ 才支持）。
实操建议：
- 在
browserslist中明确加入ios_saf >= 14、edge 等，否则-webkit-和-ms-可能被裁掉 - 对
user-select: all这类新值，autoprefixer不会降级，需手动回退为text并加注释说明 - CI 构建时用
postcss-reporter输出实际生成的 CSS，确认关键私有属性没被意外剔除
真正麻烦的不是写多少前缀，而是 Safari 对user-select的“选择策略”和“事件穿透”逻辑和其他浏览器根本不在一个模型里——有时候加了所有前缀，还是得靠selectstart事件兜底。别迷信 CSS 规则，该上 JS 就上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
