必须用::-webkit-slider-runnable-track和::-moz-range-track分别定制轨道样式，因浏览器伪元素支持不同：Chrome/Edge需-webkit-appearance: none+background+height，Firefox仅认::-moz-range-track且不支持height控制视觉高度。
Bootstrap 5 的 .form-range 轨道（track）默认样式极简，直接改 height 或 background 很容易失效或只在部分浏览器生效——根本原因是它依赖伪元素 ::-webkit-slider-runnable-track，且该伪元素在未显式设 background 时会回退到浏览器原生纹理，甚至完全不渲染。
为什么 .form-range::-webkit-slider-runnable-track 设置 height 无效？
Chrome/Edge 新版虽支持给 ::-webkit-slider-runnable-track 设 height，但 Safari 和旧版 Chromium 完全忽略；更关键的是，height 实际控制的是“轨道容器”的高度，而视觉上你看到的“细线”其实是靠 background + border-radius + 上下 padding 挤出来的。直接调 height 不仅兼容性差，还可能破坏 thumb 对齐。
- 必须为
::-webkit-slider-runnable-track显式声明background（哪怕只是background: #eee），否则轨道可能显示为灰色噪点或干脆空白 - 想变细？优先用
border-radius: 8px+padding: 2px 0视觉压缩，比硬设height: 4px更稳 - Firefox 不支持
::-webkit-slider-runnable-track，需额外加::-moz-range-track规则（且 Firefox 的 track 无height概念，只认border和background）
如何写出跨浏览器可用的轨道样式？
单靠一套 CSS 无法覆盖所有浏览器，必须分写 WebKit、Firefox 和通用 fallback。以下是最小可行组合：
.form-range {
/* 通用重置，避免干扰 */
-webkit-appearance: none;
}
.form-range::-webkit-slider-runnable-track {
background: linear-gradient(to right, #4CAF50, #2196F3);
border-radius: 8px;
height: 6px; /* 可选，仅对新版 Chromium 生效 */
margin: 4px 0; /* 配合 thumb 垂直居中 */
}
.form-range::-moz-range-track {
background: linear-gradient(to right, #4CAF50, #2196F3);
border-radius: 8px;
height: 6px; /* Firefox 实际按 border + padding 渲染，此值仅作参考 */
}
.form-range::-ms-track {
color: transparent; /* IE10+ 兼容占位 */
}- 别漏掉
-webkit-appearance: none，否则::-webkit-slider-runnable-track可能被忽略 - Firefox 的
::-moz-range-track不支持渐变动画，但支持线性渐变背景；若需动画，得用 JS 动态插 DOM 或 mask 模拟 - IE 已淘汰，
::-ms-track可省略，但保留可避免旧环境报错
自定义轨道时最容易踩的三个坑
这些不是“可能出错”，而是几乎必现的问题，尤其在调试阶段反复卡住：
立即学习“前端免费学习笔记（深入）”；
-
appearance: none写在.form-range上，但没加浏览器前缀（-webkit-appearance、-moz-appearance），导致 Safari/Firefox 仍显示原生轨道 - 给
::-webkit-slider-runnable-track设了background却忘了border-radius，结果轨道边缘毛刺、和 thumb 圆角不匹配 - 在响应式媒体查询里只改了
height，没同步调整margin和thumb尺寸，造成移动端 thumb 悬空或压住轨道
真正难的不是写几行 CSS，而是意识到：轨道不是“一个盒子”，而是三套独立伪元素规则的叠加结果；任何一个缺失或冲突，都会让整个滑块在某个浏览器里彻底失序。动手前先开三个浏览器并排测试，比后期 debug 省两小时。
