根本原因是各浏览器对input[type="range"]的默认样式、盒模型解析及伪元素实现不一致；需统一重置input、track、thumb三者样式，强制box-sizing、显式设宽高、双写定位并用transform居中，同时处理移动端缩放与点击区域。
为什么 input[type="range"] 的盒模型在 Chrome/Firefox/Safari 中表现不一致？
根本原因在于各浏览器对 input[type="range"] 的默认样式实现完全不同：Chrome 用 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 控制，Firefox 用 ::thumb 和 ::track（需前缀），Safari 则部分支持 WebKit 伪元素但渲染细节有偏差。更关键的是，width/height 在不同浏览器中作用对象不同——Chrome 下设在 input 元素上影响轨道长度，Firefox 下却可能被忽略，而滑块（thumb）的尺寸、定位、边距几乎全靠伪元素单独控制，且默认 box-sizing 不统一（有的是 content-box，有的隐式为 border-box）。
如何用 CSS 重置所有浏览器的默认盒模型？
必须显式重置三类节点：原生 input 元素本身、track（轨道）、thumb（滑块）。重点不是“美化”，而是“归一化”：
- 给
input[type="range"]设width: 100%+height: 0+padding: 0+border: none，消除 Firefox/Chrome 对 height 的歧义解释 - 对
track：所有浏览器都用height: 4px（固定值，不用em或rem），并强制box-sizing: border-box - 对
thumb：统一用width: 20px+height: 20px+margin-top: -8px（垂直居中偏移量需实测，-8px 覆盖主流浏览器 thumb 基线差异） - 禁用所有浏览器默认的
appearance: none必须写全：-webkit-appearance: none、-moz-appearance: none、appearance: none
thumb 的定位为什么不能只靠 margin？
因为 thumb 在 Chrome 和 Safari 中默认是 relative 定位，但在 Firefox 中是 absolute 定位（相对 track），导致仅用 margin 无法稳定垂直居中。必须配合 position: relative（对 Chrome/Safari）和 position: absolute（对 Firefox）双写，并用 top: 50% + transform: translateY(-50%) 统一锚点：
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -8px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border: none;
background: #007bff;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
注意：Firefox 的 ::-moz-range-thumb 不支持 margin-top，所以必须用 top + transform；Chrome 的 ::-webkit-slider-thumb 虽支持 margin-top，但加 top + transform 也不冲突，反而增强一致性。
立即学习“前端免费学习笔记（深入）”；
移动端 Safari 的缩放与点击区域问题怎么解？
iOS Safari 默认会对 input[type="range"] 进行缩放（尤其在横屏或高 DPR 屏幕下），导致 thumb 显示模糊、拖动卡顿。同时，其点击热区极小，用户常点不中：
- 加
-webkit-tap-highlight-color: transparent消除点击高亮干扰 - 用
touch-action: pan-x明确告诉浏览器只响应水平拖动，避免误触发页面滚动 - 扩大点击区域：给
input设置min-height: 44px（iOS 最小可点击尺寸），再用padding向内压缩轨道区域，例如padding: 12px 0，使视觉轨道仍为 4px 高，但实际可触控高度达 44px - 避免使用
zoom或transform: scale()，它们会破坏 thumb 的像素对齐
真正难的不是写出兼容代码，而是每次改一个 margin-top 值都要在 iOS 真机、Android Chrome、Firefox Desktop 上反复验证——因为 thumb 的基线计算逻辑藏在浏览器私有渲染引擎里，文档从不公开。
