根本原因是input type="date"被浏览器默认视为内联元素，表格单元格的padding、line-height和vertical-align挤压其空间，导致显示截断（如“2026-…”）和光标定位失准；必须显式设置width:120px、box-sizing:border-box及vertical-align:middle等样式修复。
HTML <input type="date"> 光标错位，本质不是“光标坏了”，而是浏览器在渲染该控件时，把输入区域当成内联元素处理，又没给足空间——导致光标坐标计算失准、点击位置和实际聚焦点不一致。修复必须从排版约束和事件干预双线入手。
为什么 <input type="date"> 在表格里显示截断还光标飘移
根本原因是它被当作内联元素，而 <td> 的 <code>padding、line-height 和默认 vertical-align: baseline 会挤压其可用高度与宽度，造成：
- 视觉上只显示
"2026-..."（年份后被截断） - 点击右侧日期区域，光标却落在年份字段甚至框外
- 即使设了
height: 40px，仍无法对齐文字基线
必须显式覆盖默认行为：
input[type="date"] {
width: 120px;
box-sizing: border-box;
vertical-align: middle;
font-size: 14px;
line-height: 1.5;
}
td {
vertical-align: middle;
}
注意：width: 120px 是硬性要求——ISO 格式最长为 "2026-12-31"（10 字符），加上边框/内边距，低于此值必然截断，进而触发浏览器内部坐标映射偏移。
立即学习“前端免费学习笔记（深入）”；
setSelectionRange 能否强制修正日期输入框光标位置
不能。原生 <input type="date"> 不支持 selectionStart/selectionEnd 读写，调用 inputEl.setSelectionRange(0, 0) 会静默失败（无报错但无效）。Chrome、Edge、Safari 均如此。
替代方案只有两个方向：
- 改用自定义日期选择器（如
react-datepicker或flatpickr），完全接管输入逻辑 - 退化为
<input type="text">+ 正则/格式校验 + 手动弹出日历面板（牺牲原生体验，换可控性）
别在原生 date 输入框上尝试 focus() 后再 setSelectionRange —— 这是常见误操作，浪费调试时间。
点击后光标没出现在末尾？检查是否被 transform/zoom 影响
如果日期输入框被包裹在 transform: scale(0.9) 或父级设了 zoom: 90% 的容器中，浏览器的 hit-test 坐标系会和渲染坐标系脱节，表现为：点击框右侧，光标却跳到年份字段。
验证方式（控制台执行）：
getComputedStyle(document.querySelector('input[type="date"]')).transform
// 返回 matrix(...) 表示存在 transform 干扰
修复建议：
- 禁用
zoom（非标准属性，已废弃），改用transform: scale()+transform-origin: left top - 或对
input[type="date"]单独重置：transform: none !important - 避免在表单容器上使用
transform，尤其配合v-if或display: none切换时
真正棘手的不是样式错位，而是浏览器对 type="date" 的实现差异——Safari 甚至不暴露任何可编辑文本区域，所谓“光标”只是视觉反馈。一旦涉及精细交互（比如监听年份修改、自动补全闰年），原生控件就该被替换，而不是死磕定位。
