探究placeholder表单属性与Web标准对比的文本截断样式兼容

直接写::placeholder会漏样式，因为Safari 15.3、Firefox 50、旧EdgeHTML等仍在线版本不支持该标准语法，仅识别带前缀的写法；必须按顺序声明::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder及最后的::placeholder四套规则，且每条均需显式设置opacity:1并避免rgba()，同时仅使用color、font-size等有限文本属性。

为什么直接写 ::placeholder 会漏样式？

因为 Safari 15.3、Firefox 50、旧 EdgeHTML 这些仍在线上运行的版本根本不认 ::placeholder。它们只响应带前缀的写法，而且顺序错了还会覆盖——比如把 ::-webkit-input-placeholder 放最后，Chrome 就会用它覆盖标准规则。

必须按顺序声明四套规则：::-webkit-input-placeholder（Chrome/Safari）、::-moz-placeholder（Firefox 51+）、::-ms-input-placeholder（IE10–11/EdgeHTML），::placeholder 放在最末。漏掉任意一套，对应浏览器里 placeholder 就是默认灰、变浅、或直接消失。

Firefox 的 opacity 是个隐藏陷阱

Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只写了 color: #666，最终效果也是半透明的灰字，和设计稿对不上。

• 必须每条前缀规则里都显式写 opacity: 1，不能只写在 ::placeholder 里
• 别用 rgba(102, 102, 102, 0.6) 想绕过——Safari 对 alpha 解析不稳定，深色模式下尤其容易失效
• 真要实现“#666 + 60% 透明”，得统一写成 color: #666; opacity: 0.6，且四套规则全都要带上

::placeholder 能用哪些 CSS 属性？

它不是普通元素，不支持盒模型、背景、滤镜这些。不同浏览器还各自砍一刀，稍不注意就白写。

• 安全可用：color、font-size、font-weight、line-height、text-transform、opacity
• 慎用：font-style（Safari 有时不生效）、text-align（Firefox 表现不稳定）
• 根本别试：background、border、padding、margin、transform、filter
• 绝对别用 inherit 或 currentcolor 做 color 值——Safari 可能继承 input 的 border 色，文字直接“隐形”

IE9 及更老浏览器怎么兜底？

它们连 placeholder 属性都不解析，CSS 伪元素更没戏。这时候只能靠 JS 模拟，但要注意两个关键点：

• 不要只监听 onfocus/onblur：IE9 下 focus 事件触发时机异常，得配合 oninput 和定时检测值变化
• label 模拟方案要加 pointer-events: none，否则 label 会挡住 input 的点击区域
• 动态插入的 placeholder 文本必须设 user-select: none，不然用户可能误选中它

真正麻烦的不是写几行 JS，而是确保它和原生 placeholder 的行为节奏一致——比如 Safari 是 focus 即消失，Chrome 是输入才消失，JS 版得按 UA 切换逻辑，否则表单体验割裂感极强。