真机上 placeholder 偏移是因 android webview 和 ios safari 对 ::placeholder 行盒基线对齐逻辑不同，导致字体度量错位；需统一 font-size、避免 line-height 数值、用 :placeholder-shown 替代微调。
移动端输入框 ::placeholder 样式改不生效，不是写错了，而是浏览器渲染机制和兼容性叠加导致的视觉错位或规则失效。
为什么真机上 placeholder 总是偏上或偏下？
Android WebView 和 iOS Safari 对 ::placeholder 的行盒（line box）基线对齐逻辑不同：它们把占位符和用户输入文字当成两个独立内联内容，各自按字体度量算基线。只要 font-size、line-height 或 font-family 有细微差异，“双轨错位”就立刻出现。
-
input设了font-size: 16px，但::placeholder又写了font-size: 14px→ WebKit 会为占位符单独加载字体度量，错位放大 - 用
clamp(14px, 1rem, 16px)响应式字号？只写在input上，别复制进::placeholder选择器 - 慎用
line-height: 1：它压缩 descender 空间，g、y下延部分可能被裁切；line-height: normal或1.2更稳妥 - 禁用
-webkit-appearance: textfield（尤其 iOS 旧版），它可能偷偷覆盖你设的font-size
怎么写才能全机型生效？
只写 input::placeholder 在 Safari 15.3 及更早、IE11、部分厂商定制 Android WebView 中完全不识别——必须补全四套前缀，且顺序要合理。
- 必须同时声明：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input::-ms-input-placeholder - 把标准写法
input::placeholder放在最后，便于维护，也避免被旧规则意外覆盖 - Firefox 默认
opacity: 0.54，不显式写opacity: 1会导致颜色变浅，风格不一致 - Vue
<style scoped></style>或 React CSS Modules 中，::placeholder会被自动加属性选择器，必须用:deep(input::placeholder)或:global(input::placeholder)穿透
如何用 :placeholder-shown 替代纯样式微调？
当 ::placeholder 因字体或渲染限制难以精准对齐时，:placeholder-shown 是更可控的替代路径——它匹配“正在显示占位符”的整个 input 元素，能安全修改 font-size、padding、height 等盒模型属性。
-
input:placeholder-shown { font-size: 14px; }比在::placeholder里硬调字号更可靠 - 结合
input:not(:placeholder-shown)可实现浮动标签（Floating Label）的基础状态切换 - 它不依赖伪元素渲染逻辑，兼容性极好（Chrome 47+、Firefox 51+、Safari 9.1+、Edge 79+）
- 注意：它只在
placeholder属性存在且值非空时触发；若 JS 动态清空placeholder属性，该伪类会立即失效
真正麻烦的从来不是写几行 CSS，而是同一段代码在 Chrome DevTools 里看着完美，插上 iPhone 真机一测，::placeholder 就浮高 2px —— 这种错位没法靠“多试几个 padding”解决，得从行盒基线、字体度量、伪元素继承链三层去对齐。最省事的底线是：统一 font-size、禁用 line-height 数值、用 :placeholder-shown 控制容器级样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
