chrome 从47版、firefox从51版起支持::placeholder，但firefox默认继承父级color而chrome用浅灰；仅设color可能被覆盖，需加!important确保firefox生效。
Chrome 和 Firefox 对 ::placeholder 的支持差异
Chrome 从 47 版开始原生支持 ::placeholder，Firefox 从 51 版起也支持，但默认行为不一致：Firefox 会继承父级 color，而 Chrome 默认用浅灰且更“固执”。如果你只写 ::placeholder { color: #666; }，在 Firefox 中可能被 input 自身的 color 覆盖，导致失效。
- 必须显式设置
!important才能在 Firefox 中稳定生效（尤其当 input 有内联样式或高优先级 class） - 旧版 Safari（::-webkit-input-placeholder，iOS 12 及更早版本不支持标准语法
- Edge 16+ 支持标准
::placeholder，但 Edge 12–15 需要::-ms-input-placeholder
::placeholder 不能继承父元素字体大小或行高
即使你给 input 设置了 font-size: 14px 和 line-height: 1.5，::placeholder 默认不会继承 line-height，在部分 Chrome 版本中还会把字体缩到 12px 左右——看起来比实际输入文字小一圈、位置偏上。
- 务必单独设置
font-size和line-height，例如：::placeholder { font-size: 14px; line-height: 1.5; } - 避免用
em或rem做font-size，某些浏览器解析 placeholder 时会丢失根字号上下文，改用px最稳 - 不要依赖
vertical-align调整位置，它对::placeholder无效；靠line-height+padding组合控制垂直居中
伪元素样式受限，没法做复杂交互
::placeholder 是个真·伪元素：它没有 DOM 节点，无法绑定事件，也不能用 JavaScript 获取计算样式（getComputedStyle(input).getPropertyValue('color') 拿不到 placeholder 的颜色）。
- 不能用
:hover或:focus直接作用于::placeholder—— 它不响应用户交互 - 想实现“聚焦时 placeholder 上浮”，得靠 JS 控制额外标签或用
label + transform模拟，别试图用::placeholder:focus - 动画支持极弱：Chrome 允许
opacity过渡，但 Firefox 不支持transition到::placeholder，所以渐隐效果跨浏览器不可靠
兼容写法必须按顺序声明，否则被覆盖
多个前缀规则共存时，浏览器只会应用它识别的第一个匹配规则。如果把标准写法写在最前面，老浏览器直接跳过，新浏览器又可能因优先级问题忽略后面带前缀的规则。
- 正确顺序是：先
::-webkit-input-placeholder，再::-moz-placeholder（注意无-ms-），最后::placeholder -
::-moz-placeholder要加opacity: 1，因为 Firefox 默认设了opacity: 0.54，不重置会显得太淡 - 示例片段：
input::-webkit-input-placeholder { color: #999; } input::-moz-placeholder { color: #999; opacity: 1; } input::placeholder { color: #999; }
opacity: 1 和 !important 的组合使用——不是所有场景都需要，但在表单组件库或 CSS-in-JS 环境下，样式层叠深度大，不加就大概率失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
