::-webkit-slider-runnable-track仅webkit浏览器支持，firefox需用::track和::thumb配合appearance: none，但原生支持弱；跨浏览器建议弃用原生range，改用自定义dom结构。
Chrome/Firefox里::-webkit-slider-runnable-track不生效？
因为这个伪元素只在WebKit内核浏览器（Chrome、Safari、Edge新版）中有效，Firefox完全不认它——直接写::-webkit-slider-runnable-track在Firefox里等于没写。Firefox用的是::thumb和::track（需配合appearance: none），但原生支持极弱，实际得靠自定义结构绕过。
实操建议：
- 不要试图用纯CSS伪元素统一控制所有浏览器的轨道样式，尤其别在Firefox里硬套
::-webkit-前缀 - 如果需要跨浏览器一致外观，放弃
<input type="range">原生控件，改用<div> + <code>tabindex+ 手动监听mousedown/touchstart - 若仅需Chrome/Safari支持，确保父容器没触发
transform或will-change，否则::-webkit-slider-runnable-track可能被裁剪或失位 - 把轨道背景拆成两层：
::before画底色，::after用linear-gradient叠加进度色，并通过width或background-size控制长度 - 更稳的做法：用CSS变量传入当前百分比，例如
--progress: 65;，然后background: linear-gradient(to right, #4a90e2 0%, #4a90e2 calc(var(--progress) * 1%), #e0e0e0 calc(var(--progress) * 1%)) - 注意
calc()里不能直接写var(--progress)%，必须写成calc(var(--progress) * 1%)，否则Chrome会解析失败 - 给
input[type="range"]加touch-action: none，禁用默认手势冲突 - 监听
input而非change事件获取实时值，但注意iOS Safari的input事件频率偏低，可配合requestAnimationFrame平滑更新UI - 避免在
input回调里直接操作DOM样式（如改left），改用transform: translateX()+will-change: transform - 必须同时声明
::-webkit-slider-runnable-track、::-webkit-slider-thumb、::-moz-range-track、::moz-range-thumb（Firefox旧版） -
::-webkit-slider-runnable-track默认display: block，但加了appearance: none后可能变成inline，需显式设display: block和height - 别忘了给
::-webkit-slider-thumb加-webkit-appearance: none，否则它仍带原生圆角阴影，和自定义轨道不匹配
background: linear-gradient()画轨道时颜色断层明显
用渐变做进度轨道时，常见“进度条走到某位置突然跳色”，本质是background-size和background-position没联动计算好——渐变本身不会随value自动缩放，得靠JS动态改内联样式或CSS变量驱动。
实操建议：
移动端input[type="range"]拖动卡顿或点不中
原生滑块在iOS Safari和部分Android WebView里响应延迟高，主要因为浏览器对input事件做了防抖，且touch-action: manipulation默认未启用，导致手指滑动时触发了页面滚动干扰。
实操建议：
用appearance: none后轨道消失，连::-webkit-slider-runnable-track都不显示
appearance: none会清空所有浏览器默认样式，包括轨道、滑块、甚至点击热区。它不是“隐藏轨道”，而是“卸载整个控件皮肤”，后续必须手动补全所有伪元素，漏一个就空白。
实操建议：
事情说清了就结束。最麻烦的从来不是怎么画一条轨道，而是怎么让同一套逻辑在iOS拖拽不飘移、Android触控不延迟、Firefox里不直接退化成文字输入框。
