IE8仅支持单冒号伪元素语法，必须写:before和:after，不识别::before；内容仅支持纯文本和attr()，禁用url()、Unicode图标及换行符；IE9–11需:before, ::before顺序书写以确保降级兼容。
IE8 里 ::before 完全不生效，必须改用 :before
IE8 及更早版本压根不识别 ::before 语法，遇到就整条 CSS 规则跳过，连解析都不做——不是写错了，是浏览器根本没这能力。你查 DOM、看样式面板、清缓存都没用，它就是“看不见”。
- 所有需兼容 IE8 的项目，CSS 中一律写
:before和:after，别碰::before - Sass/Less 编译默认输出双冒号，得手动配
outputStyle: 'compressed'或加插件（如sass-legacy-pseudo）强制转单冒号 - PostCSS 的
autoprefixer不处理冒号数量，它只加-webkit-前缀，别指望它救这个
IE9–IE11 要同时写 :before, ::before 且顺序不能反
IE9–11 能识别双冒号，但会静默忽略规则——不是报错，是“假装没看见”，结果就是图标/装饰线凭空消失。必须让浏览器按降级优先策略匹配。
- 写法必须是
.icon:before, .icon::before，逗号分隔，:before在前，::before在后 - 顺序反了（比如
.icon::before, .icon:before）会导致 IE8 直接跳过整条规则，因为第一个就失败了 - SCSS 嵌套自动生成时容易漏掉单冒号声明，务必检查最终编译输出是否真有两条
IE8 的 :before content 只支持纯文本和 attr()，别用图片或字体图标
IE8 的 :before 对 content 值极其苛刻：不支持 url()、不支持 Unicode 字体图标（如 \e900）、不支持 \A 换行符，写了也白写。
- 想显示图标？用
display: inline-block+background-image模拟：a:before { display: inline-block; width: 16px; height: 16px; content: ""; background: url(/i/check.png) no-repeat; } - 若用
attr()，属性名不能带连字符：data-icon-name→ 改成data-iconname，否则 IE8 返回空字符串 - 纯文本内容可用，但别指望它渲染复杂排版——
content: "✓"行，content: "\2713"就不行
IE7 及以下连 :before 都不支持，得换方案
IE7 对伪元素零支持，无论单双冒号，整条规则被无视。这不是 DOCTYPE 或 meta 能救的，是引擎级缺失。
立即学习“前端免费学习笔记（深入）”；
- 检测方式：
getComputedStyle(el, ':before')返回null时，说明浏览器不支持，该走 JS 注入逻辑 - 后备方案：用属性选择器（如
[data-icon]）配合真实 HTML 标签，或动态插入<span class="pseudo-before"></span> - 清浮动别依赖
:after，改用overflow: hidden或display: inline-block
::before 当成通用写法直接扔进项目，却没意识到 IE8 连冒号都认不了；或者以为写了 content: url() 就能显示图标，结果在 IE8 里只看到一片空白。 
