IE8及更早版本仅支持单冒号伪元素语法（:before/:after），不识别双冒号（::before），且IE7完全不支持；内容限纯文本、attr()，不支持图片、字体图标、换行符；定位层级异常，需触发hasLayout并避免fixed定位组合。
IE8及更早版本不支持双冒号::before语法
IE8只认单冒号:before和:after，遇到::before会直接忽略整个规则。这不是bug，是标准演进导致的语法断层——CSS2.1用单冒号，CSS3引入双冒号区分伪类和伪元素，但IE8没跟进。
实操建议：
- 只要需兼容IE8，一律用
:before和:after，别写::before - 构建工具（如PostCSS）加
autoprefixer也救不了这个，它只处理厂商前缀，不改伪元素语法 - 检查CSS预处理器输出：Sass/Less默认生成双冒号，需配
outputStyle: 'compressed'并手动替换或用插件降级
IE7及以下连:before都不支持，得换方案
IE7完全不识别:before和:after，哪怕写成单冒号也无效。这时候伪元素功能必须退化为HTML结构或JS注入。
常见错误现象：页面在IE7里图标、装饰线、清浮动三角全消失，控制台无报错，纯静默失效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
[class*="icon-"]这类属性选择器配合真实<span>标签做后备，比如<span class="icon-home"></span> - JS检测
getComputedStyle(document.body, ':before')返回null时动态插入DOM节点（注意避免重复执行） - 清浮动场景别依赖
:after，改用overflow: hidden或display: inline-block等老式方案
IE8中:before内容受限，不能含HTML或复杂样式
IE8的:before仅支持content里的纯文本、attr()和极简计数器（counter()），不支持url()图片、字体图标Unicode转义（如\e900）、多行\A换行符。
使用场景：想用伪元素显示Font Awesome图标或小背景图，在IE8里只会显示空或乱码。
实操建议：
-
content值只用英文字符串或attr(data-title)，避免content: '\f007'这种字体图标写法 - 背景图需求改用
background-image+ 真实元素，或CSS Sprite配合background-position - 需要换行？IE8不解析
\A，只能拆成多个:before+:after组合模拟，但极难维护，不如放弃
伪元素层级和定位在IE8中表现异常
IE8里:before生成的内容默认不参与文档流，但position: absolute时z-index行为混乱，常被父容器遮挡，且top/left计算基准偶尔错位。
性能影响：IE8重绘慢，伪元素叠加过多会明显卡顿，尤其配合filter: alpha()透明度时。
实操建议：
- 强制触发IE8的hasLayout：给伪元素父容器加
zoom: 1或position: relative - 避免在
position: fixed元素上用:before，IE8根本不支持fixed定位+伪元素组合 - z-index冲突时，宁可多套一层
<div>，也别指望:before在IE8里精准叠层
最麻烦的不是语法写错，而是IE8对伪元素的渲染逻辑藏了太多隐式条件——比如父元素display类型、是否触发hasLayout、甚至DOCTYPE声明是否严格。这些细节一漏，就变成“明明写了却看不见”。
