step="0.1" 失效源于 ieee 754 浮点数无法精确表示 0.1，导致校验不匹配；应改用整数单位（如分）、可被 2 的幂整除的 step（如 0.125），并确保 value 严格对齐 min + n × step。
step="0.1" 为什么经常失效
不是你写错了，是浏览器在用 IEEE 754 浮点数做内部计算时，0.1 根本无法被精确表示。Chrome 可能把它存成 0.10000000000000000555，累加三次后得到的“0.3”和用户手输的字符串 "0.3" 不匹配，表单提交时直接触发 validity.stepMismatch。这不是 bug，是二进制系统固有限制。
常见现象包括：输入 0.3 后点提交报错、滑块拖到一半卡住、点击 ↑ 箭头跳到 0.30000000000000004 而非 0.3。
- 别用
step="0.1"、step="0.01"处理金额或关键业务值 - 改用整数单位：元 → 分，
min="0"、step="1"、value="199"表示 1.99 元 - 必须用小数时，优先选能被 2 的幂整除的值，比如
step="0.125"（1/8）、step="0.25"
type="number" 的 value 必须与 step 对齐
浏览器不会校验你写的 value 是否合法，但会静默修正它。如果 min="0"、step="0.25" 却设 value="1.1"，Chrome 可能悄悄改成 1.0 或 1.25，导致第一次点 ↑ 就跳到意外值，甚至 spinner 完全失灵。
- 初始化时确保
value === min + n × step（n为整数），例如min="0.5"、step="0.25"，就用value="1.75"，别用"1.7" - 动态修改
step后，必须同步重置value：input.value = (Math.round(parseFloat(input.value) / newStep) * newStep).toFixed(2) - 改完立即调用
input.checkValidity()，必要时input.reportValidity()主动提示
step="any" 不是万能解药
step="any" 确实允许用户手动输入任意精度小数（如 "3.1415926"），但它不解决根本问题：箭头仍按整数步进；Safari 15.4 之前不支持；Firefox 在 type="range" 下可能忽略；且 required 验证会失效（空值也能通过）。
- 仅当业务真需要任意精度（如音频时间轴微调）且已做好降级时才用
- 搭配
input事件监听，手动截断小数位：parseFloat(e.target.value).toFixed(3) - 别指望它让滑块“自由拖动”——渲染分辨率和像素级限制远大于数学精度
移动端 time 和 range 的 step 特殊规则
type="time" 的 step 必须是秒数，step="1800" 才是半小时；step="30" 或 "00:30" 完全无效。而 type="range" 在 iOS Safari 上对小数 step 支持极差，min="0"、max="100"、step="0.1" 可能直接退化为 step="1"。
-
type="time"：只认整数秒，step="1800"是唯一可靠写法 -
type="range"：min/max/step全部统一用小数格式（如"0.00"、"10.00"、"0.01"），避免混用整数 - 步进值小于
0.1时，建议把max - min控制在 10 以内，否则滑块轨道过长、拖动分辨率下降
最常被忽略的其实是三件事：初始 value 与 min+step 的数值对齐、JS 动态赋值前未做步进规整、以及以为 step="any" 能绕过所有精度问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
