伪元素在旧版浏览器中需分层适配：ie8仅支持单冒号语法且不支持现代伪元素，ie9–10双冒号行为不稳定；应同时声明单双冒号版本、用条件注释加载ie8专用样式、提供视觉fallback、显式设置display、补zoom触发haslayout，并通过api检测而非@supports启用新特性。
伪元素样式在旧版浏览器中表现不一致，核心在于语法支持和渲染机制不同。IE8 及以下完全不支持双冒号 ::before 语法，而部分老内核对伪元素的盒模型、继承规则甚至是否渲染都存在差异。处理关键不是统一写法，而是分层适配：先确保基础可读，再按需增强。
伪元素语法要兼容 IE8–IE10
IE8 只认单冒号 :before 和 :after，且不支持 ::placeholder等现代伪元素；IE9–10 虽支持双冒号，但行为不稳定。稳妥做法是：
- 同时声明单双冒号版本，例如：
input::placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder { color: #999; } - 对 IE8 专用样式，用条件注释加载独立 CSS：
<!--[if lt IE 9]><link rel="stylesheet" href="ie8-legacy.css"><![endif]--> - 避免在 IE8 中使用
::selection或::marker，它们不被识别，也不触发报错，只是静默失效
伪元素内容与布局需降级兜底
旧内核对 content 属性支持有限，且不继承父级字体、颜色等属性。若依赖伪元素实现图标或装饰性文字，必须提供视觉 fallback：
- 不用
content: "→"做导航箭头，改用背景图或内联 SVG，否则 IE8 显示为空白 - 设置伪元素尺寸时，显式声明
display: block或inline-block，IE8 默认为inline，无法设宽高 - 若用伪元素做清除浮动（如
:after { content: ""; display: table; clear: both; }），IE8 需补zoom: 1触发 hasLayout
现代伪元素特性必须检测后启用
像 ::backdrop、::file-selector-button、::highlight() 等新伪元素，IE 全系和 Safari 15.6 之前均不支持。不能靠 @supports 判断——IE11 根本不解析该规则，会整段跳过：
- JS 中检测伪元素能力不可行，应改为检测相关 API，例如弹出全屏时检查
document.fullscreenElement是否存在，再决定是否注入 backdrop 样式 - 对
::placeholder，优先用 JS 模拟：监听focus/blur，动态切换 class 控制提示文字显隐 - 所有含伪元素的 CSS 模块，建议包裹在
@supports (display: grid)之外的降级结构中，例如先写浮动布局，再用@supports替换为 Flex + 伪元素组合
不复杂但容易忽略：伪元素不是“加个冒号就能用”的装饰语法，它是渲染管线中真实参与布局的一环。旧内核里它更像一个受限的 DOM 片段，得按实际能力设计它的存在方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
