因为浏览器用Shadow DOM封装range控件，height/background仅作用于外壳；必须设appearance: none并用各内核专属伪元素（如::-webkit-slider-thumb、::-moz-range-thumb）才能样式化内部轨道和滑块。
为什么直接写 input[type="range"] 的 height 或 background 没用？
因为浏览器对 input[type="range"] 的轨道（track）和滑块（thumb）默认使用 Shadow DOM 封装，常规 CSS 选择器无法穿透。你写的 height 只作用于 input 元素自身这个“外壳”，而真正显示的轨道和滑块是内部匿名节点，必须靠伪元素精准命中。
不加 appearance: none（及各前缀）就尝试改 ::-webkit-slider-thumb，结果是：完全无效。WebKit 内核下，伪元素只在 -webkit-appearance: none 启用后才被识别；Firefox 同理，-moz-appearance: none 是前提。
-
-webkit-appearance: none和-moz-appearance: none必须同时写，不能只写一个 - 标准属性
appearance: none要放在最后，覆盖前缀规则 - Chrome/Safari 用
::-webkit-slider-runnable-track和::-webkit-slider-thumb - Firefox 用
::-moz-range-track和::-moz-range-thumb，注意它没有progress伪类可直接控制已填充部分
::-webkit-slider-thumb 和 ::-moz-range-thumb 的尺寸行为为什么总对不齐？
根本差异在盒模型：Chrome/Safari 下 thumb 默认是 border-box，Firefox 下是 content-box。你设 width: 20px; height: 20px;，在 Firefox 中若加了 border 或 padding，实际占用空间会超出 20px，导致上下偏移或遮挡轨道。
更隐蔽的问题是垂直居中：WebKit 下 thumb 垂直居中依赖 margin-top: -Xpx 手动微调（因为轨道高度与 thumb 高度不同），而 Firefox 下 thumb 默认就贴在轨道中线，加 margin-top 反而错位。
立即学习“前端免费学习笔记（深入）”；
- 统一做法：给 thumb 设
box-sizing: border-box，并在所有浏览器中显式声明 - 垂直定位统一用
transform: translateY(-50%)+top: 50%（需父容器position: relative）比margin-top更可靠 - 不要依赖
height控制 thumb 大小——用width+height+border-radius明确定义形状
怎么让“已滑动区域”在 Chrome、Firefox、Edge 里都显示一致？
原生 input[type="range"] 没有跨浏览器通用的“已填充轨道”伪类。::-webkit-slider-runnable-track 是整条轨道，::-moz-range-track 也是整条，Edge 的 ::-ms-fill-lower 虽然能控制已填充部分，但其他两个内核不支持。
所以真要实现带进度色的滑块，必须放弃纯 CSS 方案：保留原生 input，用 JS 读取 value、计算百分比，再动态更新一个覆盖层（比如 <div class="range-fill">）的 <code>width 或 flex-basis。
- 计算公式固定为：
(value - min) / (max - min) * 100%，注意边界处理（0%和100%） - 监听
input事件而非change，保证拖动过程实时响应 - 移动端 iOS Safari 存在松手跳回问题，必须给 input 加
touch-action: manipulation - 别用
accent-color试图偷懒——它只影响 thumb 主色，且 Safari 15.4+ 才支持，Firefox 完全无视
Edge 浏览器里 ::-ms-fill-lower 为什么有时不生效？
Edge（基于 Chromium 后）已逐步弃用 -ms- 前缀伪类，新版 Edge 实际走的是 WebKit/Blink 路线，优先识别 ::-webkit-slider-thumb。但部分旧版 Edge 或企业策略强制启用旧渲染引擎时，::-ms-fill-lower 才起作用——此时它又不兼容其他内核。
这意味着：如果你写了 ::-ms-fill-lower 却没配 ::-ms-fill-upper，或者没设 background，那在旧 Edge 里可能显示空白轨道；而在新版 Edge 里这段 CSS 完全被忽略。
- 务实做法：把 Edge 当作 Chrome 处理，只维护
::-webkit-*和::-moz-*两套规则 - 如必须支持旧 Edge，需用
@supports (-ms-ime-align: auto)条件包裹，但该特性已废弃，兼容性极差 - 真机测试比模拟器重要——iOS 模拟器常无法复现 touch 行为异常，Edge DevTools 的设备模拟也不完全等效
样式统一这件事，本质不是“写全所有伪类”，而是接受浏览器限制、用 JS 补足缺失能力，并在关键交互点（比如移动端拖动）做防御性处理。伪元素只是起点，不是终点。
