因四大渲染引擎独立演进，::placeholder标准语法Chrome 57/Firefox 51/Edge 79后才统一支持，此前需分别使用::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder及::placeholder四套规则，且Firefox必须显式设opacity:1，Safari禁用rgba()，仅支持color等有限文本属性。
为什么::placeholder在Chrome/Safari/Firefox/IE里写法不同
因为四大渲染引擎（WebKit、Gecko、Blink、Trident）对 ::placeholder 的实现是各自独立演进的，不是同步标准化的。标准双冒号语法 ::placeholder 直到 Chrome 57、Firefox 51、Edge 79 才统一支持；在此之前，各厂只能靠私有前缀“临时上线”功能，导致语法分裂。
::-webkit-input-placeholder 和 ::placeholder 不是可选关系
它们是“并存但不等价”的兼容层：::-webkit-input-placeholder 在 Safari 15.3 及更早版本中是唯一有效的写法；而 ::placeholder 在 Safari 15.4+ 才真正稳定。如果你只写标准语法，iOS 用户（尤其 iOS 16.0–16.3）大概率看不到样式——不是 bug，是 Safari 主动忽略未识别的伪元素。
常见错误现象：
- 本地 Chrome 正常，测试机 Safari 占位符变黑或消失
- CI 构建后 placeholder 颜色回退为浏览器默认灰（
#999或更浅） - DevTools 里
::placeholder显示“inherited from *”，说明被全局重置规则覆盖了
Firefox 的 opacity: 1 是硬性要求，不是可选项
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只写了 color: #666，最终效果也是半透明灰色。光设 color 不够，必须显式加 opacity: 1，且每条前缀规则都要重复写——opacity 在老版 Firefox 里不继承，也不响应 initial 或 unset。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的坑：
- 用
rgba(102, 102, 102, 0.6)替代color + opacity？Safari 对 alpha 解析不稳定，深色模式下可能直接变全黑 -
inherit或currentcolor做color值？Safari 可能继承 input 边框色，导致文字“隐形” - 写了
font-weight: bold却没生效？Firefox 50–60 对字体粗细支持不一致，建议降级为font-weight: 500
哪些 CSS 属性真能用，哪些只是看起来能用
::placeholder 不是普通文本节点，它是个受限制的伪元素：所有盒模型、定位、滤镜、背景类属性一律无效。连 text-align 在 Firefox 里都时灵时不灵。
安全可用（全浏览器基本一致）：
color-
font-size/font-family/font-weight -
line-height（仅当与height不冲突时） -
opacity（必须显式声明） text-transform
慎用或弃用：
-
background、border、padding、margin→ 全部忽略 -
transform、filter、box-shadow→ 渲染异常或直接不触发 -
text-align→ Firefox 不稳定，Safari 仅支持left/right
最常被忽略的一点：外部 CSS（比如 normalize.css 或 UI 框架）经常带兜底规则如 *::placeholder { color: #aaa; }，权重比你写的 input.form-control::placeholder 还高——别只盯着自己代码，先查 Computed 面板里哪条生效。
