placeholder行高不一致的根本原因是字体度量差异：chrome按em-box计算，firefox依赖ascent/descent值；web font加载后比例变化导致line-height:1.4实际像素差2–3px，引发“上浮”或“下沉”。

placeholder 行高不一致的根本原因 不是浏览器 bug，是字体度量（font metrics）差异导致的：Chrome 按 em-box 高度计算行框，Firefox 依赖字体内置的 ascent/descent 值；Web Font 加载后，ascent/descent 比例变化，line-height: 1.4 在不同字体下实际像素高度可能差 2–3px，用户看到的就是 placeholder 文字“上浮”或“下沉”。

• ::placeholder 渲染的是匿名内联文本节点，它受父 input 的 line-height 和字体度量共同影响
• line-height 无单位值（如 1.5）会继承父级 font-size，但基线参考点仍由当前字体决定
• iOS Safari 对 font-weight 在 placeholder 中渲染异常，有时会撑高行框

让 placeholder 垂直居中的可靠写法 核心逻辑：让 input 容器的 line-height 等于其 height（或上下 padding 之和），使行框垂直居中，从而带动 placeholder 文本对齐。

• 统一用 height + line-height 控制高度，清空 padding-top/padding-bottom
• 示例：

  #search-input {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  }

• ::placeholder 中避免设 line-height，它会覆盖父级行高逻辑；只需控制 color、opacity、font-size
• 若用 clamp() 响应式高度，line-height 必须同步使用相同表达式，否则在缩放时失配

多浏览器 placeholder 样式兼容写法::placeholder 不是真实 DOM 节点，必须用多个伪元素前缀覆盖主流内核：

• 必须同时声明：::placeholder（WebKit/Chrome/Safari/Edge）、::moz-placeholder（Firefox ≥19）、::ms-input-placeholder（IE10+）
• Firefox 18 及更早需单冒号写法：:moz-placeholder（已极少见，可按需保留）
• iOS Safari 低版本对 font-weight: bold 渲染异常，建议 placeholder 中禁用或降级为 normal
• Android WebView 旧版可能忽略 opacity，可用 color: rgba(100, 100, 100, 0.6) 替代

容易被忽略的字体度量干扰点 Poppins、Inter、SF Pro 等现代字体在小字号下 ascent 偏大，即使 line-height 匹配容器高度，placeholder 仍可能视觉偏上：

• 在 ::placeholder 中加 line-height: 1 可抑制过度行高，但仅限该伪元素内生效（不影响 input 内容）
• 避免在 input 上设 vertical-align：它对表单控件本身无效，且会干扰 inline 场景下的基线链
• Web Font 加载完成前用后备字体渲染，加载后切换引发跳变——可配合 @font-face 的 font-display: optional 或 JS 监听 fontload 事件微调

真正起效的不是堆叠一堆 vertical-align 或 margin，而是把 input 当作一个有明确高度和行高的内联容器来对待。字体换、字号变、屏幕缩放，只要 height 和 line-height 同步，placeholder 就不会“飘”。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！