最常见原因是漏写 appearance: none，不加它浏览器用原生样式覆盖伪元素规则；chrome/edge需-webkit-appearance: none，firefox需appearance: none，safari部分版本建议补-moz-appearance: none。
为什么写了 ::-webkit-slider-thumb 却没反应
最常见原因是漏了 appearance: none ——这个声明是前提，不加它，浏览器就直接用原生样式盖掉所有伪元素规则。Chrome、Edge 必须写 -webkit-appearance: none，Firefox 要补 appearance: none，Safari 部分版本还得加 -moz-appearance: none（虽然后者实际影响小）。另外，input[type="range"] 默认是 inline 元素，如果父容器没设 display: block 或 flex，轨道可能塌缩，thumb 看似“消失”。
::-webkit-slider-runnable-track 和 ::track 的尺寸控制差异
WebKit 下用 ::-webkit-slider-runnable-track 控制轨道，必须显式设 height（垂直方向）或 width（水平方向），否则轨道不可见；Firefox 的 ::track 默认是 inline，得先加 display: block 才能调 height 和 border-radius。两者都不支持 background: linear-gradient() 直接画已选区——那只是轨道底色，不是“进度填充”，后者必须靠 JS + DOM 覆盖实现。
移动端滑动跳回原位、拖不动的典型原因
iOS Safari 和部分安卓 WebView 里，松手后滑块弹回，往往是因为：
- CSS 中没加
touch-action: manipulation到input[type="range"]上，导致 touch 事件被浏览器截获做默认滚动 - 监听的是
change而非input事件，造成反馈延迟，视觉上像“卡住” - JS 更新 UI 时触发强制重排（比如读取 offsetHeight 后立刻改 class），打断了浏览器对 touch 流程的跟踪
Firefox 和 Safari 对 accent-color 的支持陷阱
accent-color 是个快捷属性，只改 thumb 主色，但它在 Firefox 100+ 才开始支持，在 Safari 15.4+ 才稳定，且仅作用于未加 appearance: none 的原生样式——一旦你用了 appearance: none，它就完全失效。所以别指望靠它统一跨浏览器颜色；真要兼容，还是老实用 ::-webkit-slider-thumb 和 ::thumb 分别写背景色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
