必须分浏览器写三套CSS：WebKit用::-webkit-、Firefox用::-moz-、IE/Edge Legacy用::-ms-*，缺一不可；仅写一套会导致对应浏览器回退原生样式。
不能只写一套 CSS 就让所有浏览器生效；WebKit、Firefox、IE/Edge 各自需要不同的伪元素选择器，漏掉任何一个，对应浏览器里就会回退到丑陋的原生样式。
为什么 input[type="range"] 的样式总“不生效”
常见现象是：Chrome 里调好了，Firefox 里还是默认灰条；或者加了 ::-webkit-slider-thumb，但 IE 完全没反应。根本原因是浏览器对 input[type="range"] 的渲染引擎不同，且标准支持极不统一。
关键点在于：
-
-webkit-appearance: none必须加在基础选择器上，否则 WebKit 下的::-webkit-slider-runnable-track和::-webkit-slider-thumb会被忽略 - Firefox 使用
::-moz-range-track和::-moz-range-thumb，不识别 WebKit 前缀 - IE10–11 / Edge Legacy 只认
::-ms-track、::-ms-fill-lower、::-ms-thumb，且不支持background渐变填充轨道 - 现代 Edge（Chromium 内核）已归入 WebKit 系列，但部分旧项目仍需兼容旧 Edge
input[type="range"] 的跨浏览器样式补全写法
不要试图用一套规则覆盖全部。必须分浏览器声明，且顺序建议按 WebKit → Firefox → MS 排列（CSS 层叠逻辑优先匹配最先出现的有效规则）。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
一个最小可用的三端兼容片段：
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 8px;
}
/* WebKit */
input[type="range"]::-webkit-slider-runnable-track {
background: #e0e0e0;
border-radius: 4px;
height: 8px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #4CAF50;
border-radius: 50%;
margin-top: -6px;
}
/* Firefox */
input[type="range"]::-moz-range-track {
background: #e0e0e0;
border-radius: 4px;
height: 8px;
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #4CAF50;
border-radius: 50%;
border: none;
}
/* IE/Edge Legacy */
input[type="range"]::-ms-track {
background: transparent;
border-color: transparent;
color: transparent;
height: 8px;
}
input[type="range"]::-ms-fill-lower {
background: #e0e0e0;
border-radius: 4px;
}
input[type="range"]::-ms-fill-upper {
background: #e0e0e0;
border-radius: 4px;
}
input[type="range"]::-ms-thumb {
width: 20px;
height: 20px;
background: #4CAF50;
border-radius: 50%;
border: none;
margin-top: 0;
}注意：::-ms-thumb 在 IE 中默认垂直居中，margin-top 不起作用，需靠 height 和 track 高度对齐。
监听滑动值时，input 和 change 事件怎么选
用户拖动时是否需要实时响应，直接决定用哪个事件——这里不是风格问题，而是功能缺陷风险。
- 用
change：松手才触发一次，拖动过程中无反馈，UI 显示滞后，体验像“卡顿” - 用
input：每像素移动都触发，适合实时更新数值、进度、颜色等；但要注意移动端 iOS Safari 在快速拖动时可能丢帧 - 防丢帧技巧：给
input[type="range"]加touch-action: none，避免被父容器滚动劫持 - 值永远是字符串！
input.value是"37"，不是37；做计算前必须Number(input.value)或一元加号+input.value
移动端和无障碍容易被忽略的细节
桌面端调好不等于能上线。iOS 和 Android 原生控件行为差异大，且屏幕阅读器依赖语义正确性。
- 没设
min和max时，value默认是"50"，不是"0"，也不是空字符串——这会导致逻辑误判 - 必须配
label（显式for/id关联），否则 VoiceOver、TalkBack 无法朗读控件用途 - 滑块尺寸太小（尤其
thumb）在触屏设备上难点击，推荐 thumb 最小尺寸 ≥ 44×44px（iOS HIG）或 48×48dp（Android） - 不要用
opacity: 0隐藏原生控件再盖一层 div——会破坏键盘导航（Tab 键无法聚焦）、屏幕阅读器无法识别、focus样式失效
最稳妥的路径是：用原生 input[type="range"] + 全浏览器 CSS 适配 + 语义化标签 + input 事件监听 + 数值类型转换。任何绕过原生控件的“重写”，都会在某个角落露出马脚。
