ie8及以下不支持双冒号语法，必须同时书写:before和::before且前者在前；ie7及以下则完全不支持伪元素，需改用html或js方案。
::before 和 ::after 在 IE8 及以下完全不支持双冒号语法，必须用 :before 和 :after。这不是“写法偏好”问题，而是解析失败——IE8 遇到 ::before 会直接丢弃整条规则，连带声明的 content、display 全部失效。
如果你的项目仍需兼容 IE8，所有伪元素规则都得写两遍：
- 先写
:before/:after（IE8–IE9 支持） - 再写
::before/::after（Chrome、Firefox、Edge、Safari 等现代浏览器识别） - 顺序不能颠倒：老规则在前，新规则在后；否则 Autoprefixer 或手写时容易漏掉旧版
- 别指望
content: ""单独生效——IE8 要求display显式设为block或inline-block才能渲染伪元素
Firefox 旧版本对 ::first-line / ::first-letter 的支持极不稳定
Firefox 45 之前，::first-line 不支持 font-variant 和 text-transform；::first-letter 在内联元素中常被忽略，且无法继承父级 line-height。更麻烦的是，这些伪元素在 Firefox 中会“吃掉”紧随其后的普通选择器权重——比如 p::first-letter + span 在 Firefox 40–44 下根本不会匹配。
- 只在段落开头有纯文本时才用
::first-letter，避免套在<span></span>或<em></em>外层 -
::first-line别叠加太多属性，优先保留color、font-weight、line-height，其他一律降级为普通 class 控制 - 测试时打开 Firefox 开发者工具，在 Elements 面板里右键检查文字，看 Computed 样式里是否列出
::first-line—— 没出现就说明被跳过了
Android WebView & iOS Safari 旧版对 ::placeholder 的解析差异最大
iOS Safari 15.3 和 Android WebView 91 之前，::placeholder 不是“部分不生效”，而是“全量失效”：颜色、透明度、字体大小全归零，甚至 placeholder 文字直接消失。这不是样式被覆盖，是浏览器压根没触发该伪元素的渲染流程。
- 必须同时声明四套规则：
::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder、::placeholder -
::-moz-placeholder必须显式加opacity: 1，否则 Firefox 默认 0.54 会让颜色变灰，且这个值无法被color单独覆盖 - Safari 不认
rgba()里的 alpha 值，写color: rgba(153, 153, 153, 0.6)不如拆成color: #999; opacity: 0.6 - 别用
currentcolor或inherit做color值——Safari 可能继承 input 边框色，导致 placeholder “隐形”
真正难处理的不是“怎么写”，而是“怎么验证”。很多团队上线后才发现 placeholder 在某个 iOS 版本里全黑或全白，原因往往是构建流程里 Autoprefixer 没配对 browserslist，或者 CI 测试环境漏掉了 WebView 内核版本。伪元素的兼容性问题，90% 出现在你没手动测过的那个浏览器组合里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
