只写::placeholder在Safari和旧浏览器中不生效，是因为Chrome 57+、Firefox 51+、Edge 79+才支持该标准写法，而Safari 15.4之前、IE 10–11、旧Edge均不识别，必须补全::-webkit-input-placeholder、::-moz-placeholder（单双冒号）、::-ms-input-placeholder四套前缀；它仅支持color、font-size、opacity等有限文本样式，禁用padding、background等盒模型属性；Vue/React中需用:deep()或:global()穿透作用域，Autoprefixer无法覆盖所有兼容需求。
为什么只写 ::placeholder 样式在 Safari 和旧浏览器里不生效
不是你写错了，是浏览器根本不认识这个选择器。Chrome 57+、Firefox 51+、Edge 79+ 支持标准 ::placeholder，但 Safari 15.4 之前（包括绝大多数 iOS 用户）、IE 10–11、旧 Edge 都会直接忽略它。它们各自依赖私有前缀，且语法不统一：::-webkit-input-placeholder 覆盖 Chrome/Safari/Opera；::-moz-placeholder（单冒号）对应 Firefox 18–19；::-moz-placeholder（双冒号）从 Firefox 20 开始；::-ms-input-placeholder 是 IE 10–11 唯一有效写法。
::placeholder 能用哪些 CSS 属性，哪些会静默失效
它不是真实 DOM 元素，而是渲染层的文本投影，只接受有限的文本类样式：
- 能用：
color、font-size、font-family、font-weight、opacity、line-height、text-transform、letter-spacing - 不能用：
padding、margin、background、border、display、width、height——浏览器会静默忽略，不报错也不渲染 -
line-height特别危险：如果input自身设了line-height: 2，而::placeholder没重置，Safari 容易把文字压到顶部或截断；建议显式写line-height: normal或匹配父级值 -
opacity比单纯调color更安全：Firefox 默认opacity是 0.53，不设就会比预期更淡；opacity: 0.7比color: #999更符合“弱提示”的设计语义
Vue/React 中 ::placeholder 样式被隔离怎么办
不是框架 bug，是 CSS 作用域机制天然隔离了伪元素：
- Vue 单文件组件的
<style scoped>会给选择器自动加属性，比如input::placeholder变成input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素 —— 必须用:deep(input::placeholder)显式穿透 - React + CSS Modules 里，得用
:global(input::placeholder)包裹规则，否则样式根本不会输出到 DOM - 某些 UI 库（如 Element Plus、Ant Design）会在全局重置
input的color，意外覆盖伪元素继承行为；检查 DevTools 里::placeholder规则是否被划掉，大概率是这类高优先级规则干扰
要不要用 Autoprefixer 自动生成前缀
可以，但别全信它。Autoprefixer 确实能根据 browserslist 配置生成 ::-moz-placeholder 等前缀版本，但它无法处理 Firefox 18–19 需要的单冒号写法，也不能补上 IE 的 ::-ms-input-placeholder —— 这些仍需手动写全。更关键的是：Autoprefixer 不会帮你解决 iOS Safari 的渲染异常（比如 placeholder 文字偏上、字体度量错位），这类问题必须靠 height + line-height + box-sizing: border-box + vertical-align: middle 协同控制，且常需微调 font-size。
立即学习“前端免费学习笔记（深入）”；
