只写::placeholder在旧浏览器中无效，必须手写四套前缀（::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder、::-ms-input-placeholder）才兼容；它仅支持color、font-size、opacity等有限文本属性，不支持盒模型及背景类样式。
只写 ::placeholder 在旧浏览器里基本等于没写——Chrome ≤56、Firefox ≤19、IE 10–11、Edge ≤18 都不认，必须手写四套前缀才真正生效。
为什么写了 ::placeholder 却没效果
最常见原因是浏览器根本不解析这个选择器。它不是“偶尔失效”，而是对旧环境完全不可见。比如你在企业内网系统里测试，用户还在用 IE11 或旧版 Edge，::placeholder 规则直接被忽略，占位符退回默认浅灰小字。
-
::-webkit-input-placeholder覆盖 Chrome ≤56、Safari ≤10、Opera、旧 Edge（≤18） -
::-moz-placeholder和:-moz-placeholder都得写：前者是 Firefox 19+，后者是 Firefox 18 及更早（已可忽略但保险起见仍建议保留） -
:-ms-input-placeholder对应 IE 10–11；::-ms-input-placeholder是 Edge 12–18（注意：Edge 79+ 已支持标准::placeholder） - PostCSS 不会自动补全这些伪元素前缀，也不能靠 Autoprefixer 解决——它压根不处理伪元素
::placeholder 能设哪些样式，哪些设了也白设
它不是真实 DOM 节点，浏览器只允许响应有限的文本类属性。设了无效的属性会被静默丢弃，DevTools 里查不到报错，容易反复调却找不到原因。
- 能用：
color、font-size、font-family（必须显式声明，不继承父级）、opacity（Firefox 默认 0.53，常需重置为1）、text-align（对textarea有效）、letter-spacing、text-transform - 禁用：
background、padding、margin、border、width、height、display、visibility——iOS Safari 下加background还可能闪烁或裁剪 -
line-height要小心：单独写line-height: 1.4在 Safari 里无效；得塞进font简写里，比如font: 14px/1.4 "Segoe UI", sans-serif
怎么写才真正兼容又不冗余
别用 *::placeholder，它不匹配任何元素；也别每个属性都重复四遍。按选择器分组写，input 和 textarea 一起处理更省事：
input::placeholder, textarea::placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
- 权重不够时，
::placeholder容易被父级color覆盖——务必用具体选择器链，比如.form-control input::placeholder - 如果用了 Ant Design、Element Plus 等框架，先确认它们是否封装了
input并禁用原生placeholder样式；此时得查文档，或改用其提供的placeholder-style类似 API - 暗色模式下记得加媒体查询，否则浅灰文字在深背景上可能看不清
真正麻烦的不是写法本身，而是你永远不知道用户用什么浏览器打开——哪怕项目声明“仅支持现代浏览器”，内网、政企、教育场景里旧环境依然真实存在。漏掉任意一个前缀，就等于在那一片设备上放弃控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
