必须使 ::placeholder 字体大小与 input 一致，因二者共享行盒但基线独立，字号差异会导致基线错位，引发 placeholder 偏上或偏下，而输入文字仍居中，属 CSS 行内布局自然现象。
为什么 ::placeholder 字体大小必须和 input 保持一致
因为浏览器对 ::placeholder 的渲染是独立于输入文本的——但它又共享同一行盒（line box）。一旦 input 元素的 font-size 和 ::placeholder 的 font-size 不同，基线（baseline）就会错位。尤其在 Android WebView、旧版 Safari 或某些 Chrome 版本中，这种差异会直接表现为 placeholder 偏上或偏下，而用户输入文字却“稳坐中央”。这不是 bug，而是 CSS 行内布局的自然结果。
- Android Chrome 常见现象：
::placeholder明显偏上，输入文字居中 - iOS Safari（
- 根本解法不是调
transform: translateY()，而是让两者用同一套字体度量
如何强制统一 font-size 并避免意外覆盖
把 font-size 写在 input 元素上，而不是 ::placeholder 里。这样输入内容和占位符自动继承相同字号，基线自然对齐。同时，删掉 ::placeholder 中所有影响排版的属性（padding、line-height、text-indent），只保留语义性样式（如 color、opacity）。
-
input上设font-size: 16px→ 占位符和输入文字都按 16px 渲染 - 若需响应式，用
clamp()或rem，但确保::placeholder不再重写font-size - 禁用
-webkit-appearance: textfield（iOS 旧版）可防止原生样式偷偷改 font-size
line-height 是双刃剑：什么时候该设，什么时候该清空
line-height 在单行 input 中本质是控制行盒高度的杠杆。设成与 height 相等（如 height: 48px; line-height: 48px）能强制垂直居中；但在 Android 系统上，若 line-height 设为具体数值（如 24px），反而会放大字体度量偏差，导致 placeholder 偏移更明显。
- 推荐做法：用
line-height: normal+ 显式height，让浏览器按字体自身 metrics 计算行高 - 慎用
line-height: 1—— 它压缩行盒，可能裁切 descender（如 g、y 的下延部分） - 若坚持用数值 line-height，请确保它 ≥
font-size × 1.2，留出 ascent/descent 空间
移动端真机调试最容易忽略的点
很多开发者在桌面 Chrome 模拟器里调好了，一上真机就失效。核心原因是：不同 Android 厂商定制 WebView 对 ::placeholder 的支持程度不一，有些甚至忽略 line-height 继承规则。此时最稳的兜底方案，是放弃纯 CSS 居中，改用 :placeholder-shown 配合字体缩放。
- 对无值状态的 input 主动缩小字号：
input:placeholder-shown { font-size: 14px; } - 配合
input:not(:placeholder-shown) { font-size: 16px; }实现输入后字号恢复 - 这个组合在 Samsung Internet、Huawei Browser、Android Chrome 110+ 上实测有效
真正麻烦的从来不是怎么写，而是不同系统对同一段 CSS 的解释权不一致。哪怕你写了 line-height: 100%，Android 可能当 1.15，iOS 当 0.98。所以优先统一 font-size，其次用 :placeholder-shown 做兼容层，最后才考虑 transform 微调——别一开始就往 hack 里钻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
