::placeholder偏移源于浏览器对伪元素行盒基线对齐逻辑差异，需统一input与::placeholder的font-size、line-height:normal，用height+line-height+padding协同控制垂直居中，并优先使用:placeholder-shown微调。
移动端 input 的 ::placeholder 偏上或偏下，不是样式没写对，而是浏览器在渲染时把占位符和输入文字当成了两个独立的内联内容，各自按自己的字体度量算基线——只要字号、行高、字体家族稍有差异，视觉错位就必然出现。
为什么::placeholder在Android/iOS上表现不一致
Android WebView（尤其厂商定制版）常把 ::placeholder 渲染得偏上，iOS Safari（16.3 及更早）则因 line-height 继承异常导致文字浮高；Chrome 桌面模拟器里看着正常，真机一跑全露馅。根本原因不是 bug，是各引擎对伪元素行盒（line box）的基线对齐逻辑不同。
-
::placeholder不继承line-height数值，但会继承normal—— 所以别给它设line-height: 48px，而要在input上设line-height: normal - 必须写全四个前缀：
input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder、input::placeholder，漏一个，Safari 就回退到原生浅灰偏上样式 - 字体家族差异放大问题：比如用
Poppins时，小字号下 ascent（上行高度）偏大，::placeholder就更容易“顶到天花板”
统一字号是底线，别在::placeholder里重写font-size
只要 input 设了 font-size: 16px，::placeholder 就不该再写 font-size —— 否则 WebKit 会为占位符单独加载字体度量，输入文字居中、占位符偏上，“双轨错位”立刻出现。
- 响应式用
font-size: clamp(14px, 1rem, 16px)？只写在input上，别复制进::placeholder选择器 - 如果必须微调大小（如深色模式下提升可读性），改用
:placeholder-shown控制整个input的字号：input:placeholder-shown { font-size: 14px; } - 禁用
-webkit-appearance: textfield（iOS 旧版），它可能偷偷覆盖你设的font-size
用height + line-height + padding 协同控制垂直空间
别靠 padding-top/padding-bottom 对称来“猜”居中，那是拿不准的。真正可控的是让行盒高度等于容器高度，并清空上下 padding。
-
input上设height: 48px和line-height: 48px，padding: 0 16px（只留左右） - 若用
clamp()响应式高度，line-height必须用相同函数，否则 Safari 会解析出错 - 慎用
line-height: 1：它压缩 descender 空间，g、y下延部分可能被裁切；稳妥起见，line-height: 1.2或normal更安全 - 绝对不要混用
padding-top和line-height—— 二者叠加会引发不可预测的偏移，尤其在三星/华为定制 WebView 中
真机调试时最容易忽略的三个点
桌面 Chrome DevTools 调好了≠真机能用。Android 厂商、iOS 辅助功能、系统深色模式，都会悄悄改变字体实际渲染尺寸。
- Safari 在开启“更大字体”辅助功能时，
rem计算可能产生 0.3px 抖动，别追求像素级对齐，留 1–2px 视觉容差更实际 - 某些 Android WebView（如微信内置）完全忽略
line-height继承，此时唯一稳的兜底是input:placeholder-shown { font-size: 14px; }配合transform: translateY(-1px)微调 - 父容器用了
display: flex且align-items: baseline？立刻去掉——它会让input内部基线对齐逻辑失效，placeholder 偏移加剧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
