safari ≤15.3 不支持标准 ::placeholder 伪元素，必须显式添加 ::-webkit-input-placeholder 前缀；且需注意 opacity、line-height 等属性需显式声明，避免被 ui 框架重置或 css-in-js 哈希选择器拦截。
因为 Safari 15.3 及更早版本根本不识别 ::placeholder，必须显式补全 ::-webkit-input-placeholder 才能生效。
为什么 ::placeholder 在 Safari 里被完全忽略
Safari ≤15.3 的 WebKit 内核不支持标准双冒号语法，::placeholder 这条规则会被浏览器直接跳过，不解析、不报错、也不渲染。DevTools 里甚至看不到它出现在“Styles”面板中——不是被覆盖，是压根没加载。这和 Chrome/Firefox 完全不同，它们从 2017 年起就已支持标准写法。
- 只写
input::placeholder { color: #666; }→ Safari 15.3 及更老版本全无效 - 必须加
input::-webkit-input-placeholder { color: #666; opacity: 1; }→ 才能覆盖 Safari/Chrome/旧 Edge - 如果项目需兼容企业内网或 iOS 15.2 用户，这条前缀规则不能省，也不能只靠 Autoprefixer 补（它不处理
::placeholder）
::-webkit-input-placeholder 写了还是没反应？检查这三处
即使补了前缀，Safari 下仍可能“看起来没生效”，常见原因不是语法错，而是样式被静默拦截：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- UI 框架重置：Ant Design、Bootstrap 等常设
input::placeholder { opacity: 0.5; }，你的规则权重不够，会被划掉 -
all: unset或appearance: none作用于input元素时，会切断伪元素渲染通道，::-webkit-input-placeholder直接失效 -
<style scoped></style>或 CSS-in-JS 中，选择器被自动加哈希（如input[data-v-xxx]::-webkit-input-placeholder），但 Safari 不支持带属性的选择器匹配伪元素，必须用:deep()或提为全局样式
Safari 下 opacity 和 line-height 必须显式声明
Safari 对占位符的透明度和垂直对齐有独立逻辑，仅靠继承或默认值会出问题：
- 不写
opacity: 1→ Safari 可能叠加内部默认透明度，文字发虚甚至不可见（尤其深色背景） - 不写
line-height: normal→ 占位符文字视觉上浮，与输入文字明显错位；别在::-webkit-input-placeholder里设数值line-height，应统一在input上设line-height: normal -
font-size别在伪元素里重写 → Safari 会为占位符单独加载字体度量，导致基线偏移；所有字号控制都应放在input上
最容易被忽略的是：Safari 的 placeholder 渲染受系统辅助功能（如“更大字体”）、深色模式开关影响，实际生效的 font-size 可能浮动。不要追求像素级对齐，留 1–2px 视觉容差更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
