需为::placeholder声明所有主流浏览器前缀并按标准写法置后，配合opacity控制可见性，同时重置表单控件基础样式以确保一致性。
不同浏览器对 ::placeholder 的支持差异大
Chrome、Edge（基于 Chromium）和新版 Firefox 支持标准的 ::placeholder，但 Safari 15.4 之前只认 ::-webkit-input-placeholder，旧版 Firefox 还要用 ::-moz-placeholder（单冒号）和 ::-moz-placeholder（双冒号，用于透明度兼容）。不加前缀或只写一个，就会在某些浏览器里完全失效。
常见现象：你在 Chrome 看着好好的灰色文字，到 Safari 里变成默认黑色，甚至完全不显示。
- 必须同时声明所有主流前缀，顺序建议：标准写法放最后（CSS 后声明覆盖前声明）
-
::-moz-placeholder和::-moz-placeholder要分开写，前者匹配未聚焦时的半透明状态，后者是旧版兼容 - 不要用
:placeholder（单冒号）——它不是有效伪类，纯属笔误
color 在 ::placeholder 中的行为受限
不是所有 CSS 属性都能在 ::placeholder 上生效。color 可以用，但它的实际渲染受制于表单控件本身的 opacity 和 background-color。比如当 input 设置了 background-color: #f9f9f9，而你又给 ::placeholder 设了 color: #999，在部分 Safari 版本中可能被强制提亮，显得发灰发白。
- 避免依赖
color单独控制对比度；配合opacity更稳妥（如opacity: 0.6） - 不要对
::placeholder使用!important—— 它在某些浏览器中会被忽略，且干扰可访问性（如高对比度模式） -
font-size、font-family可继承自父元素，但line-height无效，别白费劲
统一写法示例（含兼容性兜底）
以下代码能覆盖 Chrome 100+、Firefox 90+、Safari 15.4+、Edge 105+，并兼顾旧版兼容：
立即学习“前端免费学习笔记（深入）”；
input::placeholder,
textarea::placeholder {
color: #777;
opacity: 0.7;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #777;
opacity: 0.7;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #777;
opacity: 0.7;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #777;
opacity: 0.7;
}
注意：::-moz-placeholder 出现两次是故意的——第一次是单冒号（旧 Firefox），第二次是双冒号（新 Firefox），CSS 解析器会跳过不支持的语法，不会报错。
真正影响一致性的，其实是表单控件的默认样式重置
很多人调了半天 ::placeholder，发现文字还是忽高忽低、左右偏移——问题往往不在伪类本身，而在 input 或 textarea 没做基础重置。比如 Chrome 默认有 padding，Safari 对 font 的继承更严格，而某些 UI 框架（如 Bootstrap）还会注入自己的 line-height。
- 务必先统一重置表单控件的
padding、border、font、line-height - 避免用
height控制输入框高度，改用padding + line-height - 如果用了
box-sizing: border-box，要确认padding值在各浏览器中渲染一致（特别是 Safari 对小数像素的舍入）
占位文字看起来“不统一”，八成是底层控件盒子没对齐，而不是 ::placeholder 写得不对。
